2013年4月23日火曜日

HTML5/Clipboard


そういえばHTML5ではクリップボードを利用できた様な、と思い出して調べてみた。上記のワーキングドラフトに基づけば要素ごとに copy/cut/paste/beforecopy/beforecut/beforepaste なる6つのイベントが定義される事になっている。

基礎的な使い方は簡単で、いつもながらのイベント駆動で、イベントオブジェクト(のclipboardDataメンバーオブジェクト)でクリップボードに関するデータを扱える。

少なくとも著者環境のChromium-25ではコンソールから、
document.oncopy = function(e){ console.log(e); e.clipboardData.setData('text', 'hello, clipboard!'); e.preventDefault() }
として、ページ内でCTRL+Cやポインターのコンテキストメニューからコピーを行い、このイベントがfireし、ブラウザー外へ適当にクリップボードの内容を貼り付けて見ると、
hello, clipboard!
と動作してくれる事を確認できた。

copy/cut/pasteとそれらのbefore系の6つのイベントはdivであるとかtrであるとかの各要素にも設定できる。

クリップボードを制御する為にわざわざFLASHを扱う必要などもう無くなりましたねヽ(´ー`)ノ

0 件のコメント:

コメントを投稿