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

Matt Gaunt

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

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

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

सामान्य उदाहरण

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

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

<p>Email me at <a class="js-emaillink" href="mailto:[e-mail]">[e-mail]</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() को 'कोशिश करें' में रैप कर देते हैं, क्योंकि 'कट' और 'कॉपी करें' कमांड से कुछ मामलों में गड़बड़ी हो सकती है.

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

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

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