execCommand（'copy'）在Ajax / XHR回调中不起作用？ [英] execCommand('copy') does not work in Ajax / XHR callback?
问题描述
（使用Chrome 44进行测试）
期望的行为：制作XHR请求，将结果放入文本区域，选择文本并复制到剪贴板。
$ b 实际行为：在成功的XHR请求中，将结果放入文本区域并选中它，但无法将结果复制到剪贴板。但是，如果我在XHR回调之外启动拷贝，它就可以工作。
示例html页面：
var selectAndCopy = function（）{//选择文本var cutTextarea = document.querySelector（'＃textarea'）; cutTextarea.select（）; //执行复制var successful = document.execCommand（'copy'）; var msg =成功？ '成功'：'失败'; console.log（'Cutting text command is'+ 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） {//设置文本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为H. < textarea id =textarea>您好，我是一些文字！< / textarea> < / p为H. < p为H. < button id =fetch_copy>获取数据并复制Textarea< / button> < button id =copy> Copy Textarea< / button> < / body>< / html>
p>如果按下获取数据和复制文本区按钮，则数据成功获取但不复制。如果按下复制文本区按钮，则按预期复制文本。我已经尝试了许多请求/复制组合来尝试并使其工作，但无济于事（包括在获取数据后以编程方式按下复制按钮）。有人知道这里发生了什么吗？这是一个安全功能吗？
我不希望用户必须按两个按钮才能获取并复制。
$ b $您只能触发一个副本到系统剪贴板，以直接响应受信任的用户操作，例如单击 c $ c>事件。
规格： http://www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis
(Tested using Chrome 44)
Desired behaviour: Make XHR request, put result in text area, select text, and copy to clipboard.
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.
Example html page:
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.
解决方案 You can only trigger a copy to the system clipboard in direct response to a trusted user action, such as a click event.
Spec: http://www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis
这篇关于execCommand（'copy'）在Ajax / XHR回调中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
