1分でわかるZeroClipboardのサンプルとライブラリの使い方

1. ZeroClipboardを読み込む

<script src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>

2. コピーするテキストとボタンの場所を指定

<input id="text" value="Sample Text">
<button id="btn">コピーする</button>

var btn = document.getElementById("btn");
var text = document.getElementById("text");
var clip = new ZeroClipboard(btn);
clip.on("ready beforecopy", function() {
  btn.dataset.clipboardText = text.value;
});

3. Flashの有無でボタン非表示

ZeroClipboardはFlashを使用しているためFlashが無効な環境では使用できない。

そのためFlashが使用できない場合は以下の記述でボタンを非表示にする。

try {
  if(!new ActiveXObject('ShockwaveFlash.ShockwaveFlash')) {
    btn.style.display = "none";
  }
}
catch(e) {
  if(navigator.mimeTypes ["application/x-shockwave-flash"] === undefined) {
    btn.style.display = "none";
  }
}

ZeroClipboardのサンプル

備考

• ZeroClipboard v2.xはIE9以上でないと使用できないためIE8以下で使用する場合はZeroClipboard v1.xを読み込む
• ローカル(file:~)の環境ではコピーできない
• Flash無効時はボタン非表示の処理は必ず入れておく
• Flashがインストールされていないとコピーできないのでスマートフォンやタブレット専用サイトでは使用しない