कमांड कट और कॉपी करें

IE10 और उसके बाद के वर्शन में, Document.execCommand() के ज़रिए 'कट' और 'कॉपी' कमांड के लिए सहायता जोड़ी गई है. Chrome के 43 वर्शन से, ये कमांड Chrome में भी काम करते हैं.

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

इसे Selection API के साथ इस्तेमाल करने पर, यह बहुत काम का हो जाता है. इससे प्रोग्राम के हिसाब से टेक्स्ट चुना जा सकता है, ताकि यह तय किया जा सके कि क्लिपबोर्ड में क्या कॉपी किया जाए. इस बारे में हम इस लेख में आगे ज़्यादा जानकारी देंगे.

आसान उदाहरण

उदाहरण के लिए, एक बटन जोड़ें जो उपयोगकर्ता के क्लिपबोर्ड पर ईमेल पता कॉपी करता हो.

हम अपने एचटीएमएल में ईमेल पते को बटन के साथ जोड़ते हैं, ताकि क्लिक करने पर कॉपी करने की प्रोसेस शुरू हो जाए:

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

इसके बाद, हमें अपने JavaScript में बटन के लिए क्लिक इवेंट हैंडलर जोड़ना है. इसमें हम js-emaillink ऐंकर से ईमेल पते का टेक्स्ट चुनते हैं और कॉपी करने का निर्देश देते हैं, ताकि ईमेल पता उपयोगकर्ता के क्लिपबोर्ड में सेव हो जाए. इसके बाद, हम ईमेल पते से चुने हुए का निशान हटा देते हैं, ताकि उपयोगकर्ता को यह न दिखे कि ईमेल पता चुना गया है.

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

यहां हम Selection API के एक तरीके, window.getSelection() का इस्तेमाल कर रहे हैं. इससे, टेक्स्ट के 'चुने गए हिस्से' को प्रोग्राम के हिसाब से ऐंकर पर सेट किया जा सकता है. यह वह टेक्स्ट होता है जिसे हमें उपयोगकर्ता के क्लिपबोर्ड पर कॉपी करना है. document.execCommand() को कॉल करने के बाद, window.getSelection().removeAllRanges() को कॉल करके, चुने गए टेक्स्ट को हटाया जा सकता है. अगर आपको यह पक्का करना है कि सब कुछ उम्मीद के मुताबिक काम कर रहा है, तो document.execCommand() के रिस्पॉन्स की जांच की जा सकती है. अगर यह कमांड काम नहीं करता या चालू नहीं है, तो यह गलत वैल्यू दिखाता है. हम execCommand() को try और catch में रैप करते हैं, क्योंकि कुछ मामलों में 'कट' और 'कॉपी' निर्देश गड़बड़ी दिखा सकते हैं.

'कट' निर्देश का इस्तेमाल उन टेक्स्ट फ़ील्ड के लिए किया जा सकता है जहां आपको टेक्स्ट कॉन्टेंट हटाना है और उसे क्लिपबोर्ड से ऐक्सेस करना है.

अपने एचटीएमएल में टेक्स्टएरिया और बटन का इस्तेमाल करके:

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

कॉन्टेंट में बदलाव करने के लिए, हम ये काम कर सकते हैं:

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

    try {
    var successful = document.execCommand('cut');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Cutting text command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to cut');
    }
});

queryCommandSupported और queryCommandEnabled

document.execCommand() को कॉल करने से पहले, आपको यह पक्का करना चाहिए कि इस एपीआई का इस्तेमाल किया जा सकता है या नहीं. इसके लिए, document.queryCommandSupported() तरीके का इस्तेमाल करें. ऊपर दिए गए उदाहरण में, हम सहायता के आधार पर बटन की बंद स्थिति को इस तरह सेट कर सकते हैं:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

document.queryCommandSupported() और document.queryCommandEnabled() के बीच का अंतर यह है कि ब्राउज़र में काटने और कॉपी करने की सुविधा काम कर सकती है. हालांकि, अगर फ़िलहाल कोई टेक्स्ट नहीं चुना गया है, तो ये सुविधाएं चालू नहीं होंगी. यह उन मामलों में काम आता है जहां टेक्स्ट का चुना गया हिस्सा प्रोग्राम के हिसाब से सेट नहीं किया जा रहा है. साथ ही, यह पक्का करना है कि निर्देश उम्मीद के मुताबिक काम करेगा. ऐसा न होने पर, उपयोगकर्ता को कोई मैसेज दिखाएं.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

ये निर्देश, IE 10 के बाद के वर्शन, Chrome 43 के बाद के वर्शन, Firefox 41 के बाद के वर्शन, और Opera 29 के बाद के वर्शन पर काम करते हैं.

Safari में ये निर्देश काम नहीं करते.

जानी-पहचानी गड़बड़ियां

• devtools से queryCommandSupported() को कॉल करने पर, हमेशा false दिखेगा.
• फ़िलहाल, कट करने की सुविधा सिर्फ़ तब काम करती है, जब प्रोग्राम के हिसाब से टेक्स्ट चुना जाता है.