将选择复制到剪贴板只能使用一次

Question

我有这段 JS 代码，您只需传递一个元素的 ID，它就会从该元素复制文本。但是，当我在一个页面上有多个代码段并且想要复制多个代码段时，它就不起作用了。

在第一个页面加载时，我可以复制一个片段，之后的每个片段都没有正确复制，我是否必须从第一个片段中清除剪贴板？

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

<div id="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et tempus lacus, at congue augue. Vivamus nisl diam, ornare non justo vel, pulvinar gravida magna. Nullam posuere pharetra felis, sit amet viverra ex bibendum ut. Cras hendrerit tempor metus
  ut interdum. Suspendisse potenti. Etiam mi nunc, lacinia non justo vel, eleifend lobortis lectus. Morbi nulla diam, volutpat quis mauris ut, ultrices venenatis massa.
</div>
<button onclick="copy_snippet('1');">Copy</button>

<br /><br />

<div id="2">
  Vestibulum est arcu, porttitor a leo in, rhoncus mattis elit. In hac habitasse platea dictumst. Praesent vitae felis vitae risus ornare mattis. Maecenas ac condimentum lorem. Proin ornare nisi non sapien accumsan, quis suscipit est pellentesque. Sed enim
  purus, auctor sit amet tincidunt id, convallis a eros. Aenean a rhoncus orci. Pellentesque consequat ligula tincidunt semper varius.
</div>
<button onclick="copy_snippet('2');">Copy</button>

Answer 1

不是说你要清除剪贴板，而是你需要清除选择。此答案涵盖了这一点：

Clear Text Selection with JavaScript

我已经对您的代码段进行了更改并且它正在运行（至少对我来说，在 chrome 上）

function copy_snippet(snippet){

    if(document.selection){
        document.selection.empty();
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(snippet));
        range.select().createTextRange();
        document.execCommand("copy");
    }else if(window.getSelection){
        if (window.getSelection().empty) {  // Chrome
          window.getSelection().empty();
        } else if (window.getSelection().removeAllRanges) {  // Firefox
          window.getSelection().removeAllRanges();
        }
        var range = document.createRange();
        range.selectNode(document.getElementById(snippet));
        window.getSelection().addRange(range);
        document.execCommand("copy");
    }
}

<div id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et tempus lacus, at congue augue. Vivamus nisl diam, ornare non justo vel, pulvinar gravida magna. Nullam posuere pharetra felis, sit amet viverra ex bibendum ut. Cras hendrerit tempor metus ut interdum. Suspendisse potenti. Etiam mi nunc, lacinia non justo vel, eleifend lobortis lectus. Morbi nulla diam, volutpat quis mauris ut, ultrices venenatis massa.
</div>
<button onclick="copy_snippet('1');">Copy</button>

<br /><br />

<div id="2">
Vestibulum est arcu, porttitor a leo in, rhoncus mattis elit. In hac habitasse platea dictumst. Praesent vitae felis vitae risus ornare mattis. Maecenas ac condimentum lorem. Proin ornare nisi non sapien accumsan, quis suscipit est pellentesque. Sed enim purus, auctor sit amet tincidunt id, convallis a eros. Aenean a rhoncus orci. Pellentesque consequat ligula tincidunt semper varius.
</div>
<button onclick="copy_snippet('2');">Copy</button>

将选择复制到剪贴板只能使用一次

Copy selection to clipboard only works once

html

javascript

jquery

getselection