document.execCommand（'copy'）无法在Chrome上运行 [英] document.execCommand('copy') not working on Chrome

问题描述

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

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

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

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.

• 我在之前调用 selection.removeAllRanges（） selection.addRange（）。


• selection.getRangeAt（0）.cloneContents（）返回包含正确文本的片段


• textarea中的文字未显示为已选中


• 如果我在<$之前调用 textarea.select（） c $ c> document.execCommand（'copy'）文本显示为已选中并且已显示在剪贴板中。我不想这样做，因为它会聚焦textarea并导致页面滚动。


• 在Chrome 61和63上测试，MacOS


• 在Safari中工作

• 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

这是我的代码（在点击事件监听器中使用）

https://codepen.io/jakecr/pen/XVXvKz

Here's my code (used within a click event listener)
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'));

推荐答案

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

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

似乎在值和<$之间应该使用的不匹配c $ c> textContent textarea的属性。

Chrome似乎总是使用值，而Firefox使用 textContent 。

It seems there is a mismatch as to what should be used between the value and the textContent properties of your textarea.
Chrome seems to always use value, while Firefox uses 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 将不会在此浏览器上选择任何内容...

Since chrome doesn't look at the textContent property, Range#selectNodeContents will select nothing on this browser...

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

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

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>

这篇关于document.execCommand（'copy'）无法在Chrome上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！