CSS के साथ टेक्स्ट सिलेक्शन को डिसेबल कैसे करें

user-select . का उपयोग करके टेक्स्ट चयन को अक्षम करने का तरीका जानें सीएसएस संपत्ति।

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

आप या तो अपने माउस या अपने कीबोर्ड का उपयोग करके टेक्स्ट का चयन कर सकते हैं, उदा। 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;