टेक्स्ट चयन को अक्षम करना कब ठीक है?

CSS का उपयोग करके, उपयोगकर्ताओं को एक तत्व के भीतर पाठ का चयन करने से रोकना संभव है user-select: none. अब, यह समझ में आता है कि ऐसा करना "विवादास्पद" क्यों माना जा सकता है। मेरा मतलब है, चाहिए हम मानक उपयोगकर्ता व्यवहार अक्षम कर रहे हैं? सामान्यतया, नहीं, हमें ऐसा नहीं करना चाहिए. लेकिन क्या टेक्स्ट चयन को अक्षम करने के कुछ वैध (यद्यपि दुर्लभ) उपयोग-मामले हैं? मुझे भी ऐसा ही लगता है।

इस लेख में हम इन उपयोग के मामलों का पता लगाएंगे और देखेंगे कि हम इसका उपयोग कैसे कर सकते हैं user-select: none उपयोगकर्ता अनुभवों में सुधार (बाधित नहीं) करने के लिए। यह भी कुछ भी लायक नहीं है कि user-select संपत्ति के अलावा अन्य मूल्य हैं none जिसका उपयोग टेक्स्ट चयन के व्यवहार को पूरी तरह से अक्षम करने के बजाय बदलने के लिए किया जा सकता है, और एक अन्य मान जो यहां तक ​​कि लागू करता है पाठ चयन, इसलिए हम उन पर भी एक नज़र डालेंगे।

संभव user-select मानों

आइए अलग-अलग के माध्यम से चलकर चीजों को शुरू करें user-select मूल्य और वे क्या करते हैं।

लागू user-select: none; किसी तत्व का अर्थ है कि इसकी पाठ्य सामग्री और नेस्टेड पाठ सामग्री कार्यात्मक रूप से चयन योग्य या दृष्टिगत रूप से चयन योग्य नहीं होगी (अर्थात ::selection काम नहीं करेगा)। यदि आप ऐसा चयन करना चाहते हैं जिसमें कुछ गैर-चयन योग्य सामग्री हो, तो गैर-चयन योग्य सामग्री को चयन से हटा दिया जाएगा, इसलिए इसे काफी अच्छी तरह से लागू किया गया है। और समर्थन बहुत अच्छा है।

विपरीत रूप से, user-select: text सामग्री को चयन योग्य बनाता है। आप इस मान का उपयोग ओवरराइट करने के लिए करेंगे user-select: none.

user-select: contain एक दिलचस्प है। इसे लागू करने का अर्थ है कि यदि कोई चयन तत्व के भीतर शुरू होता है तो उसे उसके भीतर भी समाप्त होना चाहिए। चयन शुरू होने पर यह अजीब तरह से लागू नहीं होता है से पहले तत्व, हालांकि, शायद यही कारण है कि वर्तमान में कोई ब्राउज़र इसका समर्थन नहीं करता है। (इंटरनेट एक्सप्लोरर और माइक्रोसॉफ्ट एज के पुराने संस्करणों ने पहले इसकी आड़ में इसका समर्थन किया था user-select: element.)

- user-select: all, तत्व की सामग्री के भाग का चयन करने से यह सब स्वतः ही चयनित हो जाता है। यह सब कुछ है या कुछ भी नहीं है, जो बहुत ही असंगत है, लेकिन उन परिस्थितियों में उपयोगी है जहां उपयोगकर्ताओं द्वारा अपने क्लिपबोर्ड पर सामग्री की प्रतिलिपि बनाने की अधिक संभावना है (उदाहरण के लिए लिंक, कोड स्निपेट आदि साझा करना और एम्बेड करना)। डबल-क्लिक करने के बजाय, सामग्री को स्वतः-चयन करने के लिए उपयोगकर्ताओं को केवल एक बार क्लिक करना होगा।

हालाँकि, सावधान रहें, क्योंकि यह हमेशा वह विशेषता नहीं होती है जो आपको लगता है कि यह है। क्या होगा यदि उपयोगकर्ता केवल चयन करना चाहते हैं भाग सामग्री का (उदाहरण के लिए Google फ़ॉन्ट्स स्निपेट का केवल फ़ॉन्ट नाम भाग या कोड स्निपेट का एक भाग)? इसे संभालना अभी भी बेहतर है ”क्लिपबोर्ड पर कॉपी करें“कई परिदृश्यों में जावास्क्रिप्ट का उपयोग करना।

का एक बेहतर अनुप्रयोग user-select: all यह सुनिश्चित करना है कि उद्धरण पूरी तरह और सटीक रूप से कॉपी किए गए हैं।

का व्यवहार user-select: auto (प्रारंभिक मान user-select) तत्व पर निर्भर करता है और इसका उपयोग कैसे किया जाता है। आप इसके बारे में और अधिक जानकारी प्राप्त कर सकते हैं हमारा पंचांग.

अब आइए इसके उपयोग के मामलों की खोज की ओर मुड़ें user-select: none...

चयन से गैर-पाठ को अलग करना

जब आप किसी वेब पेज से सामग्री की प्रतिलिपि बना रहे होते हैं, तो यह शायद किसी लेख या किसी अन्य प्रकार की लंबी-फ़ॉर्म वाली सामग्री से होती है, है ना? आप शायद नहीं चाहते कि आपके चयन में छवियां, इमोजी (जिसे कभी-कभी टेक्स्ट के रूप में कॉपी किया जा सकता है, उदाहरण के लिए ":थिंकिंगफेस:"), और अन्य चीजें जिन्हें आप एक में लपेटे जाने की उम्मीद कर सकते हैं <aside> तत्व (उदाहरण के लिए लेख में कॉल टू एक्शन, विज्ञापन, या कुछ और जो मुख्य सामग्री का हिस्सा नहीं है)।

कुछ को चयनों में शामिल होने से रोकने के लिए, सुनिश्चित करें कि यह एक HTML तत्व में लिपटा हुआ है और फिर लागू करें user-select: none इसे:

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

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

आकस्मिक चयन को रोकना

लागू करें user-select: none बटन की तरह दिखने वाले लिंक के लिए (जैसे <a href="/hi/whatever" class="button">Click Me!</a>).

a . की पाठ्य सामग्री का चयन करना संभव नहीं है <button> or <input type="submit"> क्योंकि, अच्छा, तुम क्यों करोगे? हालांकि, यह व्यवहार लिंक पर लागू नहीं होता है क्योंकि परंपरागत रूप से वे एक पैराग्राफ का हिस्सा बनते हैं जिसे चयन योग्य होना चाहिए।

काफी उचित।

हम तर्क दे सकते हैं कि लिंक को बटन की तरह दिखाना एक विरोधी पैटर्न है, लेकिन कुछ भी। यह इंटरनेट नहीं तोड़ रहा है, है ना? वह जहाज वैसे भी रवाना हो गया है, इसलिए यदि आप बटनों की तरह दिखने के लिए डिज़ाइन किए गए लिंक का उपयोग कर रहे हैं तो उन्हें बटन के व्यवहार की नकल करनी चाहिए, न केवल स्थिरता के लिए बल्कि उपयोगकर्ताओं को बातचीत को ट्रिगर करने के बजाय गलती से सामग्री का चयन करने से रोकने के लिए।

मैं निश्चित रूप से गलती से चीजों का चयन करने के लिए प्रवृत्त हूं क्योंकि मैं अपने लैपटॉप का उपयोग बिस्तर में जितना मैं स्वीकार करता हूं उससे अधिक करता हूं। साथ ही, ऐसी कई चिकित्सीय स्थितियां हैं जो नियंत्रण और समन्वय को प्रभावित कर सकती हैं, एक इच्छित क्लिक को अनपेक्षित ड्रैग/चयन में बदल सकती हैं, इसलिए ऐसी पहुंच संबंधी चिंताएं हैं जिनका समाधान किया जा सकता है user-select भी है.

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

paywall की गई सामग्री की चोरी से बचना

Paywalled सामग्री से बहुत नफरत होती है, लेकिन अगर आपको लगता है कि आपको अपनी सामग्री की रक्षा करने की आवश्यकता है, तो यह आपकी सामग्री है — किसी को भी इसे चोरी करने का अधिकार सिर्फ इसलिए नहीं है क्योंकि उन्हें विश्वास नहीं है कि उन्हें इसके लिए भुगतान करना चाहिए।

यदि आप इस मार्ग से नीचे जाना चाहते हैं, तो उपयोगकर्ताओं के लिए पेवॉल को बायपास करना अधिक कठिन बनाने के कई तरीके हैं (या इसी तरह, कॉपीराइट की गई सामग्री जैसे दूसरों के प्रकाशित कार्य की प्रतिलिपि बनाएँ)।

सीएसएस के साथ सामग्री को धुंधला करना:

article { filter: blur(<radius>); }

DevTools के लिए कीबोर्ड शॉर्टकट अक्षम करना:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

संदर्भ मेनू को स्वयं अक्षम करके संदर्भ मेनू के माध्यम से DevTools तक पहुंच को अक्षम करना:

document.addEventListener("contextmenu", e => e.preventDefault())

और निश्चित रूप से, उपयोगकर्ताओं को सामग्री को कॉपी करने से रोकने के लिए जब उन्हें स्रोत पर इसे पढ़ने की अनुमति नहीं है, आवेदन कर रहे हैं user-select: none:

<article style="user-select: none">

कोई अन्य उपयोग के मामले?

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