IE以外のモダンブラウザでクリップボードへ特定のテキストを流し込む方法。
ZeroClipboardを用いる。↓
https://github.com/zeroclipboard/zeroclipboard
まずは準備。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="/js/ZeroClipboard.min.js"></script>
<script> var clip = new ZeroClipboard($(".zero-clip"), { moviePath: 'ZeroClipboard.swf' }); clip.on('complete', function (client, args) { // コピーが成功した際のコールバック処理を記述する }); </script>
ZeroClipboard()の第一引数にはコピーを実行する際のトリガーとなる要素(ボタン要素など)を指定する。
※この際渡す要素はjQueryオブジェクトであることに注意。
また第二引数のmoviePathプロパティに指定するswfファイルはスクリプトから参照できる場所に配置すること。
次にトリガーを引いた際のコピー対象となるテキスト要素にIDを割り当て、トリガー要素の「data-clipboard-target」属性にそのIDを持たせる。
下記例。
<button class="zero-clip" data-clipboard-target="target" type="button">Copy</button>
これですべての準備が完了。設定したボタンを押せば、指定した要素内のテキストがクリップボードにコピーされる。
フラッシュの機能を用いて実現しているため、iPhoneなどのフラッシュ非対応デバイスでは動作しない点に注意。