ब्राउज़र को टेक्स्ट को हाइलाइट करने से कैसे रोकें

यदि आप एक वेब डेवलपर हैं, तो संभवतः आपको उपयोगकर्ता को पाठ का चयन करने से रोकने की आवश्यकता थी। हम एक आरक्षण करते हैं, जिसका अर्थ है कि मैं पाठ की सुरक्षा के लिए पूर्ण प्रतिबंध का मतलब नहीं हूं, लेकिन सभी प्रकार के हस्ताक्षर, शिलालेख, आदि के आवंटन पर प्रतिबंध है। जहां चयन इंटरफ़ेस और उपयोगकर्ता के काम में हस्तक्षेप करता है (सबसे अधिक बार खींचें और ड्रॉप के साथ, या डबल क्लिक के साथ पाठ का चयन)। यह मुख्य रूप से वेब एप्लिकेशन पर लागू होता है और किसी भी तरह से सूचना साइटों पर लागू नहीं होता है।



हम क्या कर सकते हैं? अभी तक मैंने ज्यादा नहीं सोचा है। लेकिन एक नई विधि (मेरे लिए व्यक्तिगत रूप से) पर जाने से पहले, हम देखेंगे कि कौन से ब्राउज़र हमें पाठ चयन से निपटने के लिए विकल्प प्रदान करते हैं।

इंटरनेट एक्सप्लोरर

यह ब्राउज़र हमें दो संभावनाएँ देता है:

1. तत्वों के लिए, मान के साथ अचयनित विशेषता सेट करें। लेकिन एक चेतावनी है: ऐसी विशेषता वाले ब्लॉक का पाठ चयनित नहीं किया जा सकता है (अर्थात, इस तत्व से चयन शुरू करना असंभव है, और इस तरह के तत्व पर क्लिक करने से चयन होने पर पाठ से चयन नहीं हटाया जाएगा), लेकिन अगर इसमें अन्य तत्व शामिल हैं (उदाहरण के लिए, " हानिरहित "स्पैन, बी, आदि) तब उनमें पाठ को प्रतिष्ठित किया जा सकता है। इसके अलावा, यदि इस तरह की विशेषता के बिना किसी ब्लॉक से पाठ का चयन शुरू किया जाता है, तो अचूक विशेषता वाले ब्लॉक के अंदर का पाठ भी चुना जाएगा। ऐसी स्थिति में, इस विशेषता के लिए सभी (!) तत्वों को सेट करने के लिए केवल एक ही समाधान है, जो असुविधाजनक है और व्यावहारिक नहीं है।
2. Selectstart इवेंट को पकड़ना। दूसरे शब्दों में, तत्व onselectstart = "असत्य पर लौटें" (उदाहरण के लिए BODY) को जोड़ने से इसके बिना पाठ का चयन रोकता है। फिर से, एक अति सूक्ष्म अंतर: यदि आप ऐसे ब्लॉक के बाहर पाठ का चयन करना शुरू करते हैं, तो इसके अंदर का पाठ बिना किसी समस्या के हाइलाइट किया जाता है।

फ़ायर्फ़ॉक्स (गेको ब्राउज़र), सफारी (KHTML ब्राउज़र)

इन ब्राउज़रों में एक अधिक उन्नत तंत्र है जो किसी भी रूप में पाठ के चयन को प्रतिबंधित करता है। यह CSS उपयोगकर्ता-चयनित संपत्ति के माध्यम से किया जाता है, जिसमें कोई भी नहीं है, जो CSS3 में शामिल है। लेकिन इस संपत्ति को मंजूरी देने से पहले, ब्राउज़रों ने क्रमशः -moz-user-select और -khtml-user-select संपत्ति का नामकरण करके लोकतांत्रिक रूप से इसे अपना इंजन चिप बनाया। यह पता चला है कि ब्लॉक के अंदर पाठ के चयन को रोकने के लिए, यह लिखना पर्याप्त है:

 -मोज़-उपयोगकर्ता-चयन: कोई नहीं;
 -khtml-user-select: कोई नहीं;
 उपयोगकर्ता-चयन: कोई नहीं;      

और बात है टोपी की।

अन्य ब्राउज़र

लेकिन अन्य ब्राउज़रों के संबंध में, उन्होंने इस तरह के तंत्र को नहीं देखा है। कोई नहीं। बेशक, ओपेरा बाकी से आगे है, उसके लिए पाठ चयन का निषेध सबसे दुर्भावनापूर्ण अपराध है। लेकिन वहाँ एक दफन जमीन है :)

साइटों के लिए हैक के साथ कल ओपेरा फाइल का अध्ययन, मैं दिलचस्प लाइनों के पार आया:

 document.addEventListener ('मूसमव', फंक्शन (ई) {
   if (e.target.getAttribute ('unselectable') == 'on'
     e.target.ownerDocument.defaultView.getSelection ()। removeAllRanges ();
 }, झूठी);

इंटरनेट एक्सप्लोरर की अचूक विशेषता को याद करें, और यह स्पष्ट हो जाता है कि इस मामले में हम पाठ चयन के साथ संघर्ष कर रहे हैं। विचार विकसित करने के बाद, हमें कुछ क्रॉस-ब्राउज़र समाधान मिला:

 समारोह निरोधक (तत्व) {
   var preventSelection = false;

   फ़ंक्शन एडहैंडलर (तत्व, घटना, हैंडलर) {
     अगर (एलिमेंट .attachEvent) 
       element.attachEvent ('ऑन' ईवेंट, हैंडलर);
     अन्यथा 
       अगर (एलिमेंट। एडडेंट लिस्टनर) 
         element.addventventListener (घटना, हैंडलर, झूठी);
   }
   समारोह हटाने () {
     if (window.getSelection) {window.getSelection ()। removeAllRanges ();  }
     और अगर (document.selection && document.selection.clear)
       document.selection.clear ();
   }
   फंक्शन किलकार्टा (इवेंट) {
     var घटना = घटना ||  window.event;
     var प्रेषक = event.target ||  event.srcElement;

     अगर (प्रेषक .agName.match (/ INPUT | TEXTAREA / i))
       वापसी;

     var key = event.keyCode ||  event.which;
     if (event.ctrlKey && key == 'A'.charCodeAt (0)) //' A'.charCodeAt (0) को 65 से बदला जा सकता है
     {
       निष्कासन ();

       अगर (event.preventDefault) 
         event.preventDefault ();
       अन्यथा
         event.returnValue = false;
     }
   }

   // माउस को टेक्स्ट का चयन न करने दें
   addHandler (तत्व, 'मूसमव', फंक्शन () {
     अगर (रोकथाम)
       निष्कासन ();
   });
   addHandler (तत्व, 'मूसडाउन', फंक्शन (ईवेंट) {
     var घटना = घटना ||  window.event;
     var प्रेषक = event.target ||  event.srcElement;
     preventSelection =! प्रेषक। tagName.match (/ INPUT | TEXTAREA / i);
   });

   // लड़ो dblclick
   // यदि आप फ़ंक्शन को dblclick इवेंट पर नहीं लटकाते हैं, तो आप बच सकते हैं
   // कुछ ब्राउज़रों में पाठ का अस्थायी चयन
   addHandler (तत्व, 'माउसअप', फंक्शन () {
     अगर (रोकथाम)
       निष्कासन ();
     रोकथाम = झूठ;
   });

   // bore ctrl + A द्वारा
   // सबसे अधिक संभावना है कि यह आवश्यक नहीं है, इसके अलावा एक संदेह है
   // कि इस तरह की जरूरत के मामले में, समारोह की जरूरत है 
   // एक बार दस्तावेज़ पर लटकाएं, एक तत्व पर नहीं
   addHandler (तत्व, 'कीडाउन', किलकार्ट्रा);
   addHandler (तत्व, 'कीप', किलकार्टला);
 }

इस फ़ंक्शन को कॉल करके, उदाहरण के लिए:

preventSelection(document);

आप INPUT और TEXTAREA तत्वों को छोड़कर पूरे दस्तावेज़ में चयन पर रोक लगाते हैं।

टिप्पणियाँ:

1. ओपेरा dblclick ईवेंट को संसाधित करने की अनुमति नहीं देता है, इसलिए इस ब्राउज़र में अभी भी डबल क्लिक के साथ पाठ का चयन करना संभव है।
2. Ctrl + A:
   
   
   1. ओपेरा में, इस संयोजन की एक लंबी (2-3 सेकंड) पकड़ पाठ के चयन का कारण बनता है जब तक यह जारी नहीं किया जाता है। इसके अलावा, यदि आप पहले A कुंजी दबाते हैं और फिर Ctrl, चयन गायब हो जाता है। यह अन्यथा रहता है।
   2. Ctrl दबाए रखते हुए सफ़ारी कुंजी के लिए कीडाउन नहीं संभालती है इसलिए, चाबियाँ जारी करने के बाद ही पाठ का चयन गायब हो जाता है। इसके अलावा, इस ब्राउज़र को कुंजियों की रिहाई के क्रम में ओपेरा के व्यवहार की विशेषता है (यदि आप पहले Ctrl दबाते हैं, तो चयन बना रहेगा)।
   
   
   
3. पाठ का चयन करने के लिए डबल-क्लिक करें:
   
   
   1. सफारी और फायरफॉक्स शब्द का चयन करें, और चयन को तुरंत हटा दें। अर्थात्, अल्पकालिक पाठ चयन का प्रभाव है।
   2. ओपेरा डिफ़ॉल्ट व्यवहार को प्रतिबंधित नहीं करता है। वह एक शब्द का चयन करती है और संदर्भ मेनू को कॉल करती है।
   
   
   

अन्य सुविधाओं की पहचान नहीं की गई है।

फ़ायरफ़ॉक्स 2.0.11, IE 6.0, ओपेरा 9.24, सफारी 3.0.3 (विन) पर परीक्षण किया गया।

बेशक, समाधान सही नहीं है, और जावास्क्रिप्ट की आवश्यकता होती है (दूसरी तरफ, जेएस का उपयोग करने वाले वेब अनुप्रयोगों में यह आवश्यक है)। लेकिन यह कुछ भी नहीं से बेहतर है, और काफी क्रॉस-ब्राउज़र (बेशक, कुछ ब्राउज़रों के लिए अतिरिक्त कोड और उनके संस्करणों की आवश्यकता हो सकती है)।

मुझे टिप्पणियों, टिप्पणियों, परिवर्धन के लिए खुशी होगी।

अद्यतन इस तथ्य के कारण कि लेख के अंत में कई लोग स्पष्ट रूप से शुरुआत को भूल जाते हैं, या ध्यान से नहीं पढ़ते हैं, मैं पहले पैराग्राफ के पहले सार को दोहराता हूं। इस लेख में, मैंने इसे कॉपी करने से बचाने के लिए पाठ के चयन को पूरी तरह से प्रतिबंधित करने की समस्या को हल नहीं किया, लेकिन मेरा मतलब सभी प्रकार के हस्ताक्षर, शिलालेख आदि को उजागर करने पर प्रतिबंध था। जहां चयन इंटरफ़ेस और उपयोगकर्ता के काम में हस्तक्षेप करता है (अधिकतर ड्रैग एंड ड्रॉप के साथ, या पाठ का चयन डबल क्लिक के साथ)। यह मुख्य रूप से वेब एप्लिकेशन पर लागू होता है और किसी भी तरह से सामान्य सूचना साइटों पर लागू नहीं होता है।