代码之家 › 专栏 › 技术社区 › Jake

文件execCommand('copy')不在Chrome上工作

clipboard google-chrome javascript

Jake · 技术社区 · 7 年前

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

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

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

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

3 回复 | 直到 7 年前

Kaiido NickSlash 7 年前

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

似乎在这两个 value 以及 textContent textarea的属性。
Chrome似乎总是使用 价值 ,而Firefox使用 文本内容 .

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不看 文本内容 所有物 Range#selectNodeContents 将不在此浏览器上选择任何内容。。。

但是,您可以使用 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>

Cato Minor 4 年前

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

每 Mozilla :

浏览器扩展有两种与系统交互的方式剪贴板:文档。execCommand()方法和现代异步剪贴板API。

也根据 Mozilla , document.execCommand() 现已过时:

此功能已过时。虽然它在某些浏览器中仍然可以工作, 不鼓励使用,因为它可以随时移除。尝试避免使用它。

使用剪贴板API,将文本写入剪贴板特别容易:

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

Google's discussion of the two clipboard systems

Another good discussion of the Clipboard API

CanIUse

voodoologic 5 年前

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