![](/img/trans.png)
[英]document.execCommand('copy') Command not working in Chrome
[英]document.execCommand('copy') not working on Chrome
在 Chrome 上,只有document.execCommand('copy')
返回 true 但不复制文本,它会清除剪贴板。
我找不到任何有同样问题的人,有很多类似的问题,但请不要将其标记为重复,除非确实如此。
selection.removeAllRanges()
之前调用selection.addRange()
。selection.getRangeAt(0).cloneContents()
返回包含正确文本的片段document.execCommand('copy')
textarea.select()
之前调用textarea.select()
文本显示为选中状态并被复制到剪贴板。 我不想这样做,因为它聚焦 textarea 并导致页面滚动。这是我的代码(在单击事件侦听器中使用)
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'));
我不太清楚这里到底发生了什么......
似乎在 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将在此浏览器上不选择任何内容...
但是,您可以使用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>
对于在 2020 年阅读此问题的人,如果您在使用document.execCommand('copy')
遇到问题,您可能想尝试使用剪贴板 API。
每个Mozilla :
浏览器扩展可以通过两种方式与系统剪贴板交互:Document.execCommand() 方法和现代异步剪贴板 API。
同样根据Mozilla , document.execCommand()
现在已过时:
此功能已过时。 尽管它可能在某些浏览器中仍然有效,但不鼓励使用它,因为它可以随时被删除。 尽量避免使用它。
使用剪贴板 API,将文本写入剪贴板特别容易:
const textToCopy = 'Hello there!'
navigator.clipboard.writeText(textToCopy)
.then(() => { alert(`Copied!`) })
.catch((error) => { alert(`Copy failed! ${error}`) })
更多信息:
我发现您无法动态插入输入字段,插入一些文本,然后将其复制到剪贴板。 我能够从现有的输入标签复制文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.