document.execCommand ('copy') के साथ क्लिपबोर्ड पर कॉपी करना बड़े ग्रंथों के साथ विफल रहता है

Question

मैं कुछ टेक्स्ट डालने के लिए एक छिपे हुए टेक्स्ट क्षेत्र का उपयोग कर रहा हूं, इसे चुनें और उसके बाद document.execCommand का उपयोग क्लिपबोर्ड पर कॉपी करने के लिए कर रहा हूं। यह आमतौर पर काम करता है लेकिन टेक्स्ट बड़ा होने पर विफल रहता है (झूठा रिटर्न)। क्रोम v55 में, ऐसा लगता है कि यह लगभग 180 के वर्णों में विफल रहता है।

क्या इस डेटा की प्रतिलिपि बनाई जा सकने वाली डेटा की सीमा है? सामान्य Ctrl + C समान सीमाओं के अधीन प्रतीत नहीं होता है।

नोट: किसी ने इसे Does document.execCommand('copy') have a size limitation? के संभावित डुप्लिकेट के रूप में चिह्नित किया है। यह एक समान सवाल हो सकता है, लेकिन उस व्यक्ति को एक विशिष्ट ढांचे के रूप में टैग किया गया था जिसका मैं उपयोग नहीं करता हूं और इसका उत्तर भी नहीं दिया गया था। मेरा मानना ​​है कि मेरा प्रश्न अधिक सामान्य और अभी भी प्रासंगिक है।

मैं संदर्भ के लिए कोड संलग्न करता हूं।

 function copyTextToClipboard(text) { 
     var textArea = document.createElement('textarea'); 
     textArea.style.position = 'fixed'; 
     textArea.style.top = 0; 
     textArea.style.left = 0; 
     textArea.style.width = '2em'; 
     textArea.style.height = '2em'; 
     textArea.style.padding = 0; 
     textArea.style.border = 'none'; 
     textArea.style.outline = 'none'; 
     textArea.style.boxShadow = 'none'; 
     textArea.style.background = 'transparent'; 
     textArea.value = text; 
     document.body.appendChild(textArea); 
     textArea.select(); 
     try { 
      var successful = document.execCommand('copy'); 
      var msg = successful ? 'successful' : 'unsuccessful'; 
      console.log('Copying text command was ' + msg); 
     } catch (err) { 
      console.log('Oops, unable to copy'); 
     } 
     document.body.removeChild(textArea); 
     } 

Answer 1

समस्या बार यह execCommand('copy') कॉल से भी इस लंबी पाठ प्रस्तुत करने के लिए ले जाता है के साथ क्या करना अधिक है।

document.execCommand ('काट'/'प्रतिलिपि') से इनकार किया गया था क्योंकि यह एक छोटी चल उपयोगकर्ता जनित ईवेंट हैंडलर अंदर से आमंत्रित नहीं किया गया:

फ़ायरफ़ॉक्स एक काफी व्याख्यात्मक त्रुटि संदेश को जन्म देती है।

आपका कोड बहुत समय लगता है पाठ उत्पन्न करने के लिए, और इस तरह ब्राउज़र के रूप में पहचानता नहीं है एक अर्द्ध भरोसा घटना ...

समाधान तो है पहले इस पाठ उत्पन्न करने के लिए, और केवल execCommand पर कॉल करने के लिए उपयोगकर्ता-इशारा सुनने के बाद। तो इसे संभव बनाने के लिए, आप उदा। टेक्स्ट उत्पन्न करने के लिए mousedown ईवेंट सुनें, और केवल mouseup ईवेंट में आप वास्तव में कॉपी कमांड निष्पादित करेंगे।

const text = ('some text a bit repetitive ' + Date.now()).repeat(50000); 
 

 
function copyTextToClipboard(text) { 
 
    // first we create the textArea 
 
    var textArea = document.createElement('textarea'); 
 
    textArea.style.position = 'absolute'; 
 
    textArea.style.opacity = '0'; 
 
    textArea.value = text; 
 
    document.body.appendChild(textArea); 
 

 
    var execCopy = e => { // triggered on mouseup 
 
    textArea.select(); 
 
    var successful = document.execCommand('copy'); 
 
    var msg = successful ? 'successful' : 'unsuccessful'; 
 
    console.log('Copying text command was ' + msg); 
 
    document.body.removeChild(textArea); 
 
    }; 
 
    // here the magic 
 
    btn.addEventListener('mouseup', execCopy, { 
 
    once: true 
 
    }); 
 
} 
 
// triggered on mousedown 
 
btn.onmousedown = e => copyTextToClipboard(text);

<button id="btn">copy some text in your clipboard</button> 
 
<p>May struggle your browser a little bit, it's quite a long text... Please be patient</p>

[करता document.execCommand ('प्रतिलिपि') एक आकार की सीमा है?] (की