有没有一种有效的方法来让按钮自动将文本复制到剪贴板？ （JavaScript的）

Question

所以我读过关于如何将文本复制到剪贴板，这整个的帖子，没有它似乎以匹配我要找的。 How do I copy to the clipboard in JavaScript?

该方案有几个字段将会有文本输入到他们，然后将复制并投进几个其他应用程序。我在IE中找到了一个快速的方法，但在其他浏览器中无法使用。这是HTML。

<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink"> 
This text will be copied onto the clipboard when you click the button below. Try it! 
</SPAN> 
<TEXTAREA ID="holdtext" STYLE="display:none;"> 
</TEXTAREA> 
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON> 

然后这里是JavaScript。

<SCRIPT LANGUAGE="JavaScript"> 

function ClipBoard() 
{ 
holdtext.innerText = copytext.innerText; 
Copied = holdtext.createTextRange(); 
Copied.execCommand("Copy"); 
} 

</SCRIPT> 

程序不能有像零剪贴板或大眼夹，因为它仍然需要，如果我把它放在一个不同的计算机上没有这些库的工作。我有最好的镜头是在本文顶部发布的链接上。它使用jQuery。

var copyTextareaBtn = document.querySelector('.js-textareacopybtn'); 

copyTextareaBtn.addEventListener('click', function(event) { 
    var copyTextarea = document.querySelector('.js-copytextarea'); 
    copyTextarea.select(); 

try { 
    var successful = document.execCommand('copy'); 
    var msg = successful ? 'successful' : 'unsuccessful'; 
    console.log('Copying text command was ' + msg); 
} catch (err) { 
    console.log('Oops, unable to copy');}}); 

所以，对于一个场的伟大工程，但我曾经学习了编程的一切告诉我不要一遍又一遍地重复自己。特别是，如果我每次只重复一件事情就会改变一件事。有一个更好的方法吗？或者是jQuery和重复我现在唯一的选择？

Answer 1

我用这个最近

document.getElementById("copyButton").addEventListener("click", function() { 
    copyToClipboard(document.getElementById("hexVal")); 
}); 

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; 
} 


<input type="text" id="hexVal" /> 
<span id="copyButton">Copy</span>