起初是使用瀏覽器提供了 copy 命令 。javascript
document.execCommand("copy")
若是是輸入框,能夠經過 select() 方法,選中輸入框的文本,而後調用 copy 命令,將文本複製到剪切板。可是 select() 方法只對 <input> 和 <textarea> 有效,對於 <p> 就很差用了java
function copyUrl() { $("#copyinput").select(); // 選擇對象 document.execCommand("Copy"); // 執行瀏覽器複製命令 alert("已複製到剪貼板!"); }
可是#copyinput不能隱藏(display:none or visibility:hidden or type="hidden"),我想要的是點擊一個按鈕就能複製隱藏控件的值。因此找到了clipboard.js 優秀!git
如下是clipboard.js 的使用方法。github
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.jscode