ZeroClipboardを紹介します。
ZeroClipboardとは
ブラウザからクリップボードに書き込むためのJavaScirptライブラリ。
githubで使われています。
なぜZeroClipboard？
クリップボード操作はブラウザ依存（InternetExplorer専用）です。 ZeroClipboardはFlashを使ってクロスブラウザを実現しています。
どうやって使う？
- 公式サイトからzipファイルをダウンロード
- 解凍
- helloworld的なhtmlが公式サイトにあるので作成します。
<html> <body> <div id="d_clip_button" class="clip_button" data-clipboard-text="Copy Me!" title="Click to copy." style="border:1px solid black; padding:20px;">Copy To Clipboard</div> <script type="text/javascript" src="ZeroClipboard.js"></script> <script type="text/javascript"> var client = new ZeroClipboard( document.getElementById('d_clip_button') ); </script> </body> </html>
- http-serverで動かす
ブラウザでローカルファイルとして開いても動きません。 http-serverの使い方はこちら。 *1
原理
指定したDOMの上に透明なFlashを配置してクリック操作をフックします。 そのため元のボタンのhoverやclickを指定するには調整が必要です。 イベントとCSSクラスが用意されています。 公式ドキュメントを参照してください。
またJavaScriptで元のボタンをclickしても動きません。
*1:公式サイトにはデモを試すにはgh-pagesブランチをcloneしろって書いてあるけど・・・・無い。
