execCommand ('copy') không hoạt động trong cuộc gọi lại Ajax/XHR?

(Tested sử dụng Chrome 44)execCommand ('copy') không hoạt động trong cuộc gọi lại Ajax/XHR?

mong muốn hành vi: Hãy yêu cầu XHR, kết quả đưa vào vùng văn bản, chọn văn bản, và sao chép vào clipboard.

Hành vi thực tế: Khi yêu cầu XHR thành công, đặt kết quả vào vùng văn bản và chọn nó, nhưng không sao chép kết quả vào khay nhớ tạm. Nhưng nếu tôi bắt đầu sao chép bên ngoài của cuộc gọi lại XHR, nó hoạt động. trang html

Ví dụ:

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>

Nếu bạn nhấn vào nút "Tìm nạp dữ liệu và sao chép Textarea" các dữ liệu được nạp thành công nhưng không được sao chép. Nếu bạn nhấn nút "Copy Textarea" thì văn bản sẽ được sao chép như mong đợi. Tôi đã thử nhiều kết hợp yêu cầu/sao chép để thử và làm cho nó hoạt động nhưng không có kết quả (bao gồm cả lập trình nhấn nút sao chép sau khi tìm nạp dữ liệu). Có ai biết chuyện gì đang xảy ra ở đây không? Đây có phải là tính năng bảo mật hay gì đó không?

Tôi không muốn người dùng phải nhấn hai nút để tìm nạp và sao chép nếu có thể.

Nguồn

2015-08-10 aeoliant

Vì vậy, làm thế nào bạn giải quyết nó cuối cùng? Bạn có thể cập nhật câu hỏi không? – ChrisGeo

@ChrisGeo Tôi đã chỉ chọn văn bản (nhưng không sao chép văn bản). Tôi nhận ra rằng người dùng có lẽ sẽ không vui nếu tôi ghi đè thứ gì đó trong bộ đệm sao chép của họ. Câu trả lời của Trevor dưới đây có vẻ như nó sẽ hoạt động (nếu bạn đồng ý với XHR đồng bộ) – aeoliant

Vấn đề này được giải quyết trong ans của tôi :) tại đây: http://stackoverflow.com/questions/43380921/not-able-to-copy -a-link-trực tiếp-khi-i-am-sử dụng-ajax/43381458 # 43381458 –

Bạn chỉ có thể kích hoạt bản sao vào khay nhớ tạm của hệ thống trong phản hồi trực tiếp với hành động của người dùng đáng tin cậy, chẳng hạn như sự kiện click.

Spec: http://www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis

Nguồn

2015-08-10 17:54:28

cảm ơn bạn! (sẽ chấp nhận ngay khi có thể) – aeoliant

Cảm ơn bạn @Tim Down. Cuối cùng tôi đã tìm thấy câu trả lời của bạn –

Tôi đã khắc phục vấn đề này ở đây :) http://stackoverflow.com/questions/43380921/not-able-to-copy-a-link-directly-when-i-am-using- ajax/43381458 # 43381458 –

Nếu bạn thực hiện XMLHttpRequest đồng bộ, điều này sẽ làm việc. Bạn chỉ cần thêm false như tham số thứ ba để 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>

Nguồn

2016-06-17 18:49:16 Trevor

XHR đồng bộ nói chung là một ý tưởng tồi nhưng rất khó để thấy một cách để làm điều này trong một bước mà không có nó. Ngoài ra, bạn sẽ nhận được cảnh báo về các yêu cầu XHR đồng bộ trong bảng điều khiển của Chrome. –

execCommand ('copy') không hoạt động trong cuộc gọi lại Ajax/XHR?

Trả lời

Các vấn đề liên quan