There are two main ways to add extra info…
April 19, 2018
Javascript: 实现复制内容到粘贴板, clipboardjs用法, 实现复制内容到剪贴板, How TO – Copy Text to Clipboard
1. 简单方法
HTML
<!-- The text field --> <input type="text" value="Hello World" id="myInput"> <!-- The button used to copy the text --> <button onclick="myFunction()">Copy text</button>
JavaScript
function myFunction() { /* Get the text field */ var copyText = document.getElementById("myInput"); /* Select the text field */ copyText.select(); /* Copy the text inside the text field */ document.execCommand("Copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); }
DEMO: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard
2. 中级用法
HTML
<input id="copyTarget" value="Some initial text"> <button id="copyButton">Copy</button><br><br> <span id="copyTarget2">Some Other Text</span> <button id="copyButton2">Copy</button><br><br> <input id="pasteTarget"> Click in this Field and hit Ctrl+V to see what is on clipboard<br><br> <span id="msg"></span><br>
JavaScript:
document.getElementById("copyButton").addEventListener("click", function() { copyToClipboardMsg(document.getElementById("copyTarget"), "msg"); }); document.getElementById("copyButton2").addEventListener("click", function() { copyToClipboardMsg(document.getElementById("copyTarget2"), "msg"); }); document.getElementById("pasteTarget").addEventListener("mousedown", function() { this.value = ""; }); function copyToClipboardMsg(elem, msgElem) { var succeed = copyToClipboard(elem); var msg; if (!succeed) { msg = "Copy not supported or blocked. Press Ctrl+c to copy." } else { msg = "Text copied to the clipboard." } if (typeof msgElem === "string") { msgElem = document.getElementById(msgElem); } msgElem.innerHTML = msg; setTimeout(function() { msgElem.innerHTML = ""; }, 2000); } function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA"; var origSelectionStart, origSelectionEnd; if (isInput) { // can just use the original source element for the selection and copy target = elem; origSelectionStart = elem.selectionStart; origSelectionEnd = elem.selectionEnd; } else { // must use a temporary form element for the selection and copy target = document.getElementById(targetId); if (!target) { var target = document.createElement("textarea"); target.style.position = "absolute"; target.style.left = "-9999px"; target.style.top = "0"; target.id = targetId; document.body.appendChild(target); } target.textContent = elem.textContent; } // select the content var currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // copy the selection var succeed; try { succeed = document.execCommand("copy"); } catch(e) { succeed = false; } // restore original focus if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } if (isInput) { // restore prior selection elem.setSelectionRange(origSelectionStart, origSelectionEnd); } else { // clear temporary content target.textContent = ""; } return succeed; }
或者简单点, 用下面的也行:
function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA"; var origSelectionStart, origSelectionEnd; if (isInput) { // can just use the original source element for the selection and copy target = elem; origSelectionStart = elem.selectionStart; origSelectionEnd = elem.selectionEnd; } else { // must use a temporary form element for the selection and copy target = document.getElementById(targetId); if (!target) { var target = document.createElement("textarea"); target.style.position = "absolute"; target.style.left = "-9999px"; target.style.top = "0"; target.id = targetId; document.body.appendChild(target); } target.textContent = elem.textContent; } // select the content var currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // copy the selection var succeed; try { succeed = document.execCommand("copy"); } catch(e) { succeed = false; } // restore original focus if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } if (isInput) { // restore prior selection elem.setSelectionRange(origSelectionStart, origSelectionEnd); } else { // clear temporary content target.textContent = ""; } return succeed; }
DEMO: https://jsfiddle.net/jfriend00/v9g1x0o6/
来源:https://stackoverflow.com/a/22581382/4484798
3. 高级库 clipboardjs
主页:https://clipboardjs.com/
项目:https://github.com/zenorocha/clipboard.js
用法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>constructor-nodelist</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <button data-clipboard-text="1">Copy</button> <button data-clipboard-text="2">Copy</button> <button data-clipboard-text="3">Copy</button> <!-- 2. Include library --> <script src="../dist/clipboard.min.js"></script> <!-- 3. Instantiate clipboard by passing a list of HTML elements --> <script> var btns = document.querySelectorAll('button'); var clipboard = new ClipboardJS(btns); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </body> </html>
本文:Javascript: 实现复制内容到粘贴板, clipboardjs用法, 实现复制内容到剪贴板, How TO – Copy Text to Clipboard