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

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() को ऐक्सेस किया जा सकता है. अगर आपको यह पुष्टि करनी है कि सब कुछ उम्मीद के मुताबिक काम कर रहा है, तो दस्तावेज़.execCommand() का जवाब; अगर कमांड नहीं है, तो यह गलत दिखाता है समर्थित या सक्षम किया गया हो. हम execCommand() को आज़माने के लिए रैप करते हैं और 'cut' के बाद से कैच करते हैं और 'कॉपी करें' निर्देश देते हुए गड़बड़ी हो सकती है कुछ मामलों में.

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

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

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