js實現復制隱藏域的內容 —— clipboard.js

起初是使用瀏覽器提供了 copy 命令 。

document.execCommand("copy")

如果是輸入框，可以通過 select() 方法，選中輸入框的文本，然后調用  copy 命令，將文本復制到剪切板。但是 select() 方法只對 <input> 和 <textarea> 有效，對於 <p> 就不好用了

 function copyUrl() {
     $("#copyinput").select();  // 選擇對象  
     document.execCommand("Copy"); // 執行瀏覽器復制命令  
     alert("已復制到剪貼板！");
 }

但是#copyinput不能隱藏（display:none or  visibility:hidden or type="hidden"），我想要的是點擊一個按鈕就能復制隱藏控件的值。所以找到了clipboard.js 優秀！

以下是clipboard.js 的使用方法。

HTML：
<input type="hidden" id="content" value="復制的內容"/>
<input type="button" id="copyUrl" value="請點擊我復制"/>

JS:
    var clipboard2 = new ClipboardJS('#copyUrl', {
        text: function() {
              return $("#content").val();
            }
    });
    clipboard2.on('success', function(e) {
    	  console.log("已復制到剪貼板！");
     });
    clipboard2.on('error', function (e) {
     });

兼容以下瀏覽器版本

下載鏈接：https://github.com/zenorocha/clipboard.js