ZeroClipboardを使ってテキストをクリップボードにコピー

ボタンをタップすることで、テキストをクリップボードへコピーする(スマホ除く

  1. ZeroClipboard読み込み
  2. HTML
  3. JS
<!-- 1 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
</head>

<!-- 2 -->
<p>コピーされます</p>
<input id="textcp" type="hidden" value="コピーされます">
<div id="btn">Click me</div>

<!-- 3 -->
<script>
  $(function(){
    // ZeroClipboad JS
    var btn = document.getElementById("btn");
    var textcp = document.getElementById("textcp");
    var clip = new ZeroClipboard(btn);
    clip.on("ready beforecopy", function() {
      btn.dataset.clipboardText = textcp.value;
    });
    try {
      if(!new ActiveXObject('ShockwaveFlash.ShockwaveFlash')) {
        btn.style.display = "none";
      }
    }
    catch(e) {
       if(navigator.mimeTypes ["application/x-shockwave-flash"] === undefined) {
         btn.style.display = "none";
       }
     }
   });
</script>
</body>