用clipboard做複製文字的功能程式碼
阿新 • • 發佈:2019-01-04
程式碼如下:
<input id="foo" value="這裡是內容"> <button class="btn" data-clipboard-target="#foo">點選複製</button> <script src="dist/clipboard.min.js"></script> <script> new Clipboard('.btn');//首先需要您需要通過傳遞DOM選擇器,HTML元素或HTML元素列表來例項化它。 <script>
如果要新增事件,可以這樣:
<input id="foo" value="這裡是內容"> <button class="btn" data-clipboard-target="#foo">點選複製</button> <script src="dist/clipboard.min.js"></script> <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { alert("複製成功!"); e.clearSelection(); }); clipboard.on('error', function(e) { alert("複製失敗!"); }); <script>
另一方式:
window.copyToClipboard = function(text) { // IE specific if (window.clipboardData && window.clipboardData.setData) { return clipboardData.setData("Text", text); } // all other modern target = document.createElement("textarea"); target.style.position = "absolute"; target.style.left = "-9999px"; target.style.top = "0"; target.textContent = text; document.body.appendChild(target); target.focus(); target.setSelectionRange(0, target.value.length); // copy the selection of fall back to prompt try { document.execCommand("copy"); target.remove(); console.log('Copied to clipboard: "'+text+'"'); } catch(e) { console.log("Can't copy string on this browser. Try to use Chrome, Firefox or Opera.") window.prompt("Copy to clipboard: Ctrl+C, Enter", text); } }