【Javascript】Javascriptでクリップボードへのコピーを行う。

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などのフラッシュ非対応デバイスでは動作しない点に注意。