您的位置: 首页  >  技术问答  >  是否有一种有效的方法让按钮自动将文本复制到剪贴板？ （JavaScript的）

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

分类: 技术问答 • 2022-03-06 17:57:56

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

问题描述：

So I've read this entire post on how to copy text to a clipboard, and none of it seems to match what I'm looking for. How do I copy to the clipboard in JavaScript?

The program has several fields that are going to have text entered into them, that will then be copied and dropped into several other applications. I found a quick way to do this in IE, but it won't work in any other browser. Here's the 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>

And then here's the JavaScript. 

<SCRIPT LANGUAGE="JavaScript">

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

</SCRIPT>

The program can't have something like Zero Clipboard or Clippy, because it still needs to work if I put it on a different computer without those libraries. The best shot I've had was one on the link posted at the top of this article. It uses 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');}});

So that works great for one field, but everything I've ever learned about programming tells me not to repeat myself over and over again. ESPECIALLY if I'm only changing one thing every time I repeat it. Is there a better way to do this? Or is jQuery and repetition my only option at this point?

所以我已经阅读了关于如何将文本复制到剪贴板的整篇文章，似乎没有一个匹配 我正在寻找什么。 如何使用JavaScript复制到剪贴板？

该程序有几个字段可以输入文本，然后将其复制并放入其他几个应用程序中。 我在IE中找到了一种快速的方法，但它不适用于任何其他浏览器。 这是HTML。 p> 

 ＆lt; SPAN ID =“copytext”STYLE =“height：150; width：162; background-color：pink”＆gt; 
这个文本将是 单击下面的按钮复制到剪贴板上。 试试吧！
＆lt; / SPAN＆gt; 
＆lt; TEXTAREA ID =“holdtext”STYLE =“display：none;”＆gt; 
＆lt; / TEXTAREA＆gt; 
＆lt; BUTTON onClick =“ClipBoard（）;”＆gt;复制到 剪贴板＆lt; / BUTTON＆gt; 
  code>  pre> 
 
 
然后是JavaScript。   p> 
 
 


 ＆lt; SCRIPT LANGUAGE =“JavaScript”＆gt; 
 
function ClipBoard（）
 {
nxttext.innerText = copytext.innerText; 
Copied = holdtext.createTextRange（  ）; 
 
Copied.execCommand（“Copy”）; 
} 
 
＆lt; / SCRIPT＆gt; 
  code>  pre> 
 
 
程序不能有类似零剪贴板的东西 或Clippy，因为如果我把它放在没有这些库的不同计算机上它仍然需要工作。 我最好的镜头是在本文顶部发布的链接上。 它使用jQuery。 p> 
 
 


  var copyTextareaBtn = document.querySelector（'。js-textareacopybtn'）; 
 
copyTextareaBtn.addEventListener（'click'，function（event）{\  n var copyTextarea = document.querySelector（'。js-copytextarea'）; 
 copyTextarea.select（）; 
 
try {
 var successful = document.execCommand（'copy'）; 
 var msg = success？  '成功'：'不成功'; 
 console.log（'复制文本命令为'+ msg）; 
} catch（错误）{
 console.log（'哎呀，无法复制'）;}}）  ; 
  code>  pre> 
 
 
这对于一个领域非常有用，但是我所学到的关于编程的一切都告诉我不要一遍又一遍地重复自己。 特别是如果我每次重复它只改变一件事。 有一个更好的方法吗？ 或者jQuery和重复是我此时唯一的选择？ p> 
  div>

答

I used this recently

 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>

相关推荐