2015-08-10 9 views
5

(क्रोम 44 का उपयोग कर परीक्षण किया गया)execCommand ('copy') अजाक्स/एक्सएचआर कॉलबैक में काम नहीं करता है?

वांछित व्यवहार: 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>

आप "प्राप्त डेटा और कॉपी Textarea" बटन दबाते हैं डेटा सफलतापूर्वक प्राप्त नहीं बल्कि की नकल की है। यदि आप "कॉपी टेक्स्टिएरा" बटन दबाते हैं तो पाठ की अपेक्षा की जाती है। मैंने अनुरोध/प्रतिलिपि के कई संयोजनों को कोशिश करने और इसे काम करने के लिए प्रयास करने की कोशिश की है, लेकिन इसका कोई फायदा नहीं हुआ है (डेटा लाने के बाद प्रोग्राम बटन को कॉपी बटन दबाकर)। क्या किसी को पता है कि यहाँ क्या हो रहा है? क्या यह एक सुरक्षा सुविधा या कुछ है?

मैं नहीं चाहता कि उपयोगकर्ता को संभवतः लाने और प्रतिलिपि बनाने के लिए दो बटन दबाएं।

+0

तो आप इसे कैसे अंत में हल किया? क्या आप सवाल अपडेट कर सकते हैं? – ChrisGeo

+0

@ChrisGeo मैंने बस टेक्स्ट का चयन किया (लेकिन इसे कॉपी नहीं किया)। मुझे एहसास हुआ कि अगर उपयोगकर्ता अपनी प्रतिलिपि बफर में कुछ लिखता है तो शायद मैं खुश नहीं होगा। ट्रेवर का उत्तर नीचे दिखता है जैसे यह काम करेगा (यदि आप सिंक्रोनस एक्सएचआर के साथ ठीक हैं) – aeoliant

+0

यह समस्या मेरे ans में हल हो गई है :) यहां: http://stackoverflow.com/questions/43380921/not-able-to-copy -ए-लिंक-सीधी-कब-मैं-उपयोग-एजेक्स/43381458 # 43381458 –

उत्तर

12

आप केवल click ईवेंट जैसे विश्वसनीय उपयोगकर्ता कार्रवाई के लिए सीधे प्रतिक्रिया में सिस्टम क्लिपबोर्ड पर प्रतिलिपि बना सकते हैं।

युक्ति: http://www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis

+0

धन्यवाद! (जितनी जल्दी हो सके स्वीकार करूँगा) – aeoliant

+0

धन्यवाद @ टिम डाउन। अंत में मुझे आपका उत्तर –

+0

मिला है मैंने इस समस्या को यहां धीमा कर दिया है :) http://stackoverflow.com/questions/43380921/not-able-to-copy-a-link- प्रत्यक्ष रूप से- when-i-am-using- AJAX/43381458 # 43381458 –

7

आप XMLHttpRequest तुल्यकालिक करते हैं, तो यह काम करेंगे। तुम बस xhr.open(...) के लिए तीसरे पैरामीटर के रूप में false जोड़ने के लिए:

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>

+1

सिंक्रोनस एक्सएचआर आम तौर पर एक बुरा विचार है लेकिन इसे बिना किसी चरण में ऐसा करने का तरीका देखना मुश्किल है। साथ ही, आपको क्रोम के कंसोल में सिंक्रोनस एक्सएचआर अनुरोधों के बारे में चेतावनियां मिलेंगी। –

संबंधित मुद्दे