document.execCommand('copy') 无法处理 Chrome

Question

On Chrome only document.execCommand('copy') returns true 但不复制文本，它清除剪贴板。

我找不到遇到同样问题的人，有很多类似的问题，但请不要将其标记为重复，除非它确实是重复的。

我在 selection.addRange() 之前打电话给 selection.removeAllRanges()。
selection.getRangeAt(0).cloneContents() returns 包含正确文本的片段
文本区域中的文本未显示为选中状态
如果我在 document.execCommand('copy') 之前调用 textarea.select()，文本将显示为选中状态并复制到剪贴板。我不想这样做，因为它会聚焦文本区域并导致页面滚动。
在 Chrome 61 和 63、MacOS
在 Safari 中工作

这是我的代码（在点击事件侦听器中使用）
https://codepen.io/jakecr/pen/XVXvKz

var textarea = document.createElement('textarea');
textarea.textContent = 'coppied text';
document.body.appendChild(textarea);

var selection = document.getSelection();
var range = document.createRange();
range.selectNodeContents(textarea);
selection.removeAllRanges();
selection.addRange(range);

// DOESN'T WORK WITHOUT THIS
// textarea.select();

console.log(selection.getRangeAt(0).cloneContents());
console.log('copy success', document.execCommand('copy'));

Answer 1

我不太清楚这里到底发生了什么......

您的 textarea 的 value 和 textContent 属性似乎不匹配。
Chrome 似乎总是使用 value，而 Firefox 使用 textContent.

btn.onclick = e => {
  const txt = document.createElement('textarea');
  document.body.appendChild(txt);
  txt.value = 'from value'; // chrome uses this
  txt.textContent = 'from textContent'; // FF uses this
  var sel = getSelection();
  var range = document.createRange();
  range.selectNode(txt);
  sel.removeAllRanges();
  sel.addRange(range);
  if(document.execCommand('copy')){
    console.log('copied');
  }
  document.body.removeChild(txt);
}

<button id="btn">Copy!</button>
<textarea>You can paste here

</textarea>

由于chrome不看textContent属性，Range#selectNodeContents不会select在这个浏览器上...

但是，您可以使用 Range#selectNode，在这种情况下应该 return 得到相同的结果，并且可以解决该问题。

document.getElementById('btn').addEventListener('click', function(){
  var textarea = document.createElement('textarea');
  textarea.textContent = 'copied text';
  document.body.appendChild(textarea);

  var selection = document.getSelection();
  var range = document.createRange();
//  range.selectNodeContents(textarea);
  range.selectNode(textarea);
  selection.removeAllRanges();
  selection.addRange(range);

  console.log('copy success', document.execCommand('copy'));
  selection.removeAllRanges();

  document.body.removeChild(textarea);
  
})

<button id="btn">copy</button>
<textarea>You can paste here</textarea>

Answer 2

我发现您无法动态插入输入字段，插入一些文本，然后将其复制到剪贴板。我能够从现有输入标签复制文本。

Answer 3

对于 2020 年阅读此问题的人，如果您在 document.execCommand('copy') 上遇到问题，您可能想尝试使用剪贴板 API。

每 Mozilla:

There are two ways browser extensions can interact with the system clipboard: the Document.execCommand() method and the modern asynchronous Clipboard API.

同样根据 Mozilla，document.execCommand() 现在已过时：

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

使用剪贴板API，将文本写入剪贴板特别容易：

const textToCopy = 'Hello there!'
navigator.clipboard.writeText(textToCopy)
  .then(() => { alert(`Copied!`) })
  .catch((error) => { alert(`Copy failed! ${error}`) })

更多信息：

Mozilla's discussion of the two clipboard systems

Google's discussion of the two clipboard systems

Another good discussion of the Clipboard API

CanIUse

document.execCommand('copy') 无法处理 Chrome

document.execCommand('copy') not working on Chrome

javascript

clipboard

google-chrome