[英]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.