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

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() को एक बार कोशिश करके कैच कर लेते हैं. इसकी वजह यह है कि 'cut' और 'copy' कमांड से, कुछ स्थितियों में गड़बड़ी हो सकती है.

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

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

<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() को कॉल करने पर हमेशा 'गलत' दिखेगा.
• फ़िलहाल, कट की सुविधा सिर्फ़ तब काम करती है, जब प्रोग्राम के हिसाब से टेक्स्ट को चुना जाता है.