[英]document.execCommand('copy') not working on Chrome
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.我找不到任何有同样问题的人,有很多类似的问题,但请不要将其标记为重复,除非确实如此。
selection.removeAllRanges()
before selection.addRange()
.selection.removeAllRanges()
之前调用selection.addRange()
。selection.getRangeAt(0).cloneContents()
returns a fragment containing the correct text selection.getRangeAt(0).cloneContents()
返回包含正确文本的片段textarea.select()
before document.execCommand('copy')
the text appears selected and gets coppied to the clipboard.document.execCommand('copy')
textarea.select()
之前调用textarea.select()
文本显示为选中状态并被复制到剪贴板。 I don't want to do this because it focuses the textarea and causes the page to scroll.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'));
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 value
and the textContent
properties of your textarea.似乎在 textarea 的
value
和textContent
属性之间应该使用什么不匹配。
Chrome seems to always use value
, while Firefox uses 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 textContent
property, Range#selectNodeContents will select nothing on this browser...由于 chrome 不查看
textContent
属性,因此Range#selectNodeContents将在此浏览器上不选择任何内容...
However, you can use Range#selectNode which 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>
For people reading this question in 2020, if you're having trouble with document.execCommand('copy')
, you may want to try using the Clipboard API.对于在 2020 年阅读此问题的人,如果您在使用
document.execCommand('copy')
遇到问题,您可能想尝试使用剪贴板 API。
There are two ways browser extensions can interact with the system clipboard: the Document.execCommand() method and the modern asynchronous Clipboard API.
浏览器扩展可以通过两种方式与系统剪贴板交互:Document.execCommand() 方法和现代异步剪贴板 API。
Also per Mozilla , document.execCommand()
is now obsolete:同样根据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.
尽量避免使用它。
With the Clipboard API, writing text to the clipboard is particularly easy:使用剪贴板 API,将文本写入剪贴板特别容易:
const textToCopy = 'Hello there!'
navigator.clipboard.writeText(textToCopy)
.then(() => { alert(`Copied!`) })
.catch((error) => { alert(`Copy failed! ${error}`) })
More info:更多信息:
Mozilla's discussion of the two clipboard systems Mozilla 对两种剪贴板系统的讨论
Google's discussion of the two clipboard systems 谷歌对两种剪贴板系统的讨论
Another good discussion of the Clipboard API另一个关于剪贴板 API 的好讨论
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.
我能够从现有的输入标签复制文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.