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

Answer 1

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

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

Answer 2

我认为，当您将href添加到<a>时，window不会清除所有选定的字符串，因此会复制两个值。我不确定如何解决此问题，但这是一个技巧（在您的CopyToClipboard(containerid)函数顶部添加此代码）：

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

您知道该清除所有基于this link的文本选择

希望有帮助。

Answer 3

我认为您应该使用剪贴板.js插件。 Here Is The Link

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

3 个答案: