javascript document.execCommand('copy') 不适用于 Chrome

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

提问by Jake

On Chrome only document.execCommand('copy')returns true but does not copy the text, it clears the clipboard.

在 Chrome 上只document.execCommand('copy')返回 true 但不复制文本，它会清除剪贴板。

I can't find anyone who's had the same problem, there are a lot of similar questions but please don't mark this as a duplicate unless it really is.

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

• I am calling selection.removeAllRanges()before selection.addRange().
• selection.getRangeAt(0).cloneContents()returns a fragment containing the correct text
• The text in the textarea doesn't appear selected
• If I call textarea.select()before document.execCommand('copy')the text appears selected and gets coppied to the clipboard. I don't want to do this because it focuses the textarea and causes the page to scroll.
• Tested on Chrome 61 and 63, MacOS
• Working in Safari

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

Here's my code (used within a click event listener)
https://codepen.io/jakecr/pen/XVXvKz

这是我的代码（在单击事件侦听器中使用）
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'));

回答by Kaiido

I am not really clear as to what really happens here...

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

It seems there is a mismatch as to what should be used between the valueand the textContentproperties of your textarea.
Chrome seems to always use value, while Firefox uses textContent.

似乎在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>

Since chrome doesn't look at the textContentproperty, Range#selectNodeContentswill select nothing on this browser...

由于 chrome 不查看textContent属性，因此Range#selectNodeContents将在此浏览器上不选择任何内容...

However, you can use Range#selectNodewhich should return the same result in this case, and will workaround the issue.

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

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>

回答by voodoologic

I have found that you can't dynamically insert a input field, insert some text, and then copy it to the clipboard. I was able to copy text from an existing input tag.

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