execCommand（'copy'）在XHR回调中不工作？ [英] execCommand('copy') does not work in XHR callback?
问题描述
（使用Chrome 44测试）
(Tested using Chrome 44)
希望的行为：执行XHR请求，将结果放入文本区域，选择文本，剪贴板。
Desired behaviour: Make XHR request, put result in text area, select text, and copy to clipboard.
实际行为：成功的XHR请求时，将结果放入文本区域并选择，但无法将结果复制到剪贴板。但是如果我在XHR回调之外启动副本，它会工作。
Actual behaviour: On successful XHR request, puts the result in text area and selects it, but fails to copy result to clipboard. But if I initiate the copy outside of the XHR callback, it works.
示例html页面：
var selectAndCopy = function() {
// Select text
var cutTextarea = document.querySelector('#textarea');
cutTextarea.select();
// Execute copy
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Cutting text command was ' + msg);
};
var fetchCopyButton = document.querySelector('#fetch_copy');
fetchCopyButton.addEventListener('click', function(event) {
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://httpbin.org/ip');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// Set text
var textarea = document.querySelector('#textarea');
textarea.value = xhr.responseText;
selectAndCopy();
}
}
};
xhr.send();
});
var copyButton = document.querySelector('#copy');
copyButton.addEventListener('click', function(event) {
selectAndCopy();
});
<html>
<head>
</head>
<body>
<p>
<textarea id="textarea">Hello, I'm some text!</textarea>
</p>
<p>
<button id="fetch_copy">Fetch Data and Copy Textarea</button>
<button id="copy">Copy Textarea</button>
</p>
</body>
</html>
如果按下获取数据并复制文本区域按钮，数据将被成功读取，但不会被复制。如果按复制文本区域按钮，文本将按预期复制。我尝试了许多请求/复制的组合尝试，并得到它的工作，但没有效果（包括以编程方式按下复制按钮获取数据后）。有谁知道这里发生了什么？这是一个安全功能还是什么？
If you press the "Fetch Data and Copy Textarea" button the data is successfully fetched but not copied. If you press the "Copy Textarea" button the text is copied as expected. I've tried many combinations of request/copy to try and get it to work but to no avail (including programmatically pressing the copy button after fetching data). Does anyone know what's going on here? Is this a security feature or something?
我不希望用户必须按两个按钮才能获取和复制。
I don't want the user to have to press two buttons to fetch and copy if possible.
推荐答案
您只能通过直接响应受信任的用户操作（例如点击）触发系统剪贴板的副本。 event。
You can only trigger a copy to the system clipboard in direct response to a trusted user action, such as a click event.
规格： http://www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis
这篇关于execCommand（'copy'）在XHR回调中不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
