如何在JavaScript中修复复制到剪贴板的错误？

Question

使用以下代码，我有一个功能来复制指定元素的文本范围，但是如果在同一页上多次出现并尝试使用两个按钮来复制不同的元素，则始终只会粘贴您点击的第一个元素。

不确定我是否解释清楚了，所以这里有一个例子：

A = abc

B = xyz

Button1 = CopyToClipboard('A')

Button2 = CopyToClipboard('B')

//If I clicked button1 then button2 I would get the contents of button1 (abc). 

两个按钮都是可以使用的，但是在你点击其中一个按钮之后，就不能再复制另一个按钮了。

HTML:

<div>
    <a id="A">abc</a>
</div>
<div>
    <a href="javascript:void(0);" onclick="CopyToClipboard('A')">COPY</a>
</div>
<div>
    <a id="B">xyz</a>
</div>
<div>
    <a href="javascript:void(0);" onclick="CopyToClipboard('B')">COPY</a>
</div>

JS:

function CopyToClipboard(containerid) {
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy");
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().addRange(range);
    document.execCommand("copy");
  }
}

编辑： 代码片段链接：https://plnkr.co/edit/z5bCymHPgEdTQhYShlMR?p=preview

- Will Bainbridge

---

我不确定我是否正确，但当我运行它时，我觉得你的代码就可以正常工作。你确定没有其他的拼写错误吗？ - Pouria Moosavi

是的，这是我正在开发的网站 https://www.maxmears.com/io/，如果您向下滚动到'OUR SERVERS'部分并尝试复制服务器IP，您就会明白我的意思。顺便说一句：我还没有为小于1440p的分辨率做过任何max css，所以如果您的屏幕分辨率小于1440p，它将看起来破碎。 - Will Bainbridge

根据您的示例，当我点击一个按钮然后再点击另一个按钮时，它会复制两个值。请查看此链接 https://plnkr.co/edit/cSLAb6qRMIfqzF6yV0dE?p=preview，并告诉我是否正常工作。 - Pouria Moosavi

我无法点击那个按钮，我忘记添加A标签的href属性，以便它们可以被点击：https://plnkr.co/edit/z5bCymHPgEdTQhYShlMR?p=preview - Will Bainbridge

实际上它们是可点击的，而且它们也能够完成它们的工作，只是不显示手指！ - Pouria Moosavi

Answer 1

我认为当你给 <a> 添加 href 后，window 并没有清除所有选定的字符串，因此会复制两个值。我不确定如何解决这个问题，但是这里有一个方法可以解决它（在你的 CopyToClipboard(containerid) 函数顶部添加以下代码）：

if (window.getSelection().empty) {  // Chrome
  window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) {  // Firefox
  window.getSelection().removeAllRanges();
}

正如你所知道的，该功能会基于this link清除所有文本选择。

希望这能有所帮助。

- Pouria Moosavi

Answer 2

我在这里找到任何人的答案

<script>

window.onload = function () {

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

    copyTextareaBtn.forEach(function(btn){
        btn.addEventListener('click', function (event) {
        var copyTextarea = document.getElementById(this.dataset.txtid);
        copyTextarea.select();

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

    });
}

</script>

<p>Test #1 </p>

<div>
<textarea id="txta1" class="js-copytextarea" readonly="readonly" style="width:20%;" 
rows="5">Hello. This is textarea test bed #1</textarea>
<button data-txtid="txta1" class="js-textareacopybtn">Copy Text (works)</button>

<p>Test #2:</p>

<textarea id="txta2" class="js-copytextarea" readonly="readonly" style="width:20%;" 
rows="5">Hi! Welcome to textarea test bed #2 </textarea>
<button data-txtid="txta2" class="js-textareacopybtn">Copy Text</button>

</div>

- Giang D.MAI

Answer 3

我认为你应该使用clipboard.js插件。 这里是链接

- Muhammad Bilal