[英]execCommand('copy') does not work in Ajax / XHR callback?
（使用 Chrome 44 测试）
期望的行为：发出 XHR 请求，将结果放入文本区域，选择文本，然后复制到剪贴板。
实际行为：在 XHR 请求成功时，将结果放入文本区域并选择它，但无法将结果复制到剪贴板。 但是如果我在 XHR 回调之外启动副本，它就可以工作。
示例 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>
如果您按下“获取数据并复制文本区域”按钮，数据将被成功获取但未被复制。 如果您按“复制文本区域”按钮，文本将按预期复制。 我尝试了多种请求/复制组合来尝试使其工作但无济于事（包括在获取数据后以编程方式按下复制按钮）。 有谁知道这里发生了什么？ 这是安全功能还是什么？
如果可能，我不希望用户必须按两个按钮来获取和复制。
您只能触发复制到系统剪贴板以直接响应受信任的用户操作，例如click事件。
规范： http : //www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis
免责声明：不建议在主线程上使用同步 XMLHttpRequest。 在使用此解决方案之前，请阅读本文并确保您知道自己在做什么。 不建议将其用于生产用途。
如果您使 XMLHttpRequest 同步，这将起作用。 您只需将false添加为xhr.open(...)的第三个参数：
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', false); 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>
document.execCommand copy命令无效或其他解决方案？
[英]document.execCommand copy command does not work or other solution?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.