日々量産

考えてることとか

クリック時に任意のテキストをクリップボードにコピーしたい

要約

最近のブラウザは、領域を選択してdocument.execCommand('copy');を使えば良いが、ユーザに操作を行わせる必要がある

サンプルコード

雑記

本当に記事にするほどの事でもないが・・・

元々はNotification APIの通知を受け取ったら、勝手にクリップボードへコピーするWebアプリを作りたかったが、ユーザの操作を受けないとダメらしい。(その代わり、通知領域のonclickイベントは取れるので、これでコピーはできるはず。)

よくよく考えれば勝手にコピーさせる動作は恐怖であるため、ユーザの操作でコピーすべきではある。

OnClick以外(keydownとか)でも取れるのかは未調査。

また、MouseEventを作ってelement.dispatchEventで疑似的にクリックイベントを発行してクリックしても、イベントハンドらは動作するが、クリップボードへのコピーは行われない。 (Event#isTrustedプロパティをチェックしているっぽい?dispatchEvent時にfalseにされるらしい。)

また、イベントハンドラ内で、setTimeout(function(){ document.execCommand('copy'); }, 0) とかしてもダメ。(これで最初の1回はクリックさせて、あとはsetIntervalで1秒おきに走らせつづければ...とか思ったけど無理だった)

なお、昔はFlashPlayerのオブジェクトを埋め込んで実現していたらしい。

参考

Can I use... Support tables for HTML5, CSS3, etc