user-select CSS प्रॉपर्टी का उपयोग करके टेक्स्ट सिलेक्शन डिसेबल करना सीखें।
डिफ़ॉल्ट रूप से, वेब ब्राउज़र्स आपको किसी भी वेबसाइट पर टेक्स्ट सिलेक्ट करने की अनुमति देते हैं — जब तक यह एक असली टेक्स्ट एलिमेंट है और उस पर टेक्स्ट वाली इमेज नहीं है।
आप अपने माउस का उपयोग करके या अपने कीबोर्ड का उपयोग करके टेक्स्ट सिलेक्ट कर सकते हैं, उदा. cmd + a (मैक), या ctrl + a (विंडोज)।
लेकिन क्या होगा यदि आप टेक्स्ट सिलेक्शन की अनुमति नहीं देना चाहते (किसी भी कारण से)?
आप CSS प्रॉपर्टी user-select का उपयोग करते हैं और इसे none मान देते हैं:
selector { user-select: "none"; }तो मान लीजिए आप हर उस एलिमेंट पर टेक्स्ट सिलेक्शन डिसेबल करना चाहते हैं जिसमें .select-none नामक क्लास है:
.select-none { user-select: "none"; }और फिर उस क्लास को किसी भी एलिमेंट में जोड़ें जिस पर आप टेक्स्ट सिलेक्शन डिसेबल करना चाहते हैं:
<p class="select-none">This text cannot be selected.</p>डेमो:
यह टेक्स्ट एलिमेंट सिलेक्ट नहीं किया जा सकता, खुद आज़माएं!
नोट: user-select प्रॉपर्टी को सभी ब्राउज़रों में काम करने के लिए आपको इन ब्राउज़र प्रीफिक्स का उपयोग करने की आवश्यकता है:
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
