CSS टेक्स्ट चयन को अक्षम करता है


93

वर्तमान में, मैंने पाठ चयनों को अक्षम करने के लिए इसे बॉडी टैग में रखा है:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

हालाँकि, मेरे inputऔर textareaबक्से अब अचूक हैं। मैं केवल इन इनपुट तत्वों को कैसे चुन सकता हूं और बाकी को अचयनित कर सकता हूं?


मैं सेलेक्ट inputऔर textareaएलिमेंट्स कर पा रहा हूं : jsfiddle.net/Smy26
सैम्पसन

ऐसा लगता है कि वेबकिट उन तत्वों पर चयन की अनुमति देता है, लेकिन moz नहीं करता है।
ईसाई

जवाबों:


172

इन गुणों को पूरे शरीर पर लागू न करें। उन्हें एक कक्षा में ले जाएं और उस वर्ग को उन तत्वों पर लागू करें जिन्हें आप चयनित करना चाहते हैं:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

3
क्रोम, सफारी में समर्थित नहीं है
knutole

5
@knutole तालिका को फिर से पढ़ें। मूल्य के elementक्रोम / सफारी में समर्थित नहीं है।
एमफोरमार्नलन

31

आप सभी तत्वों पर उपयोगकर्ता का चयन अक्षम कर सकते हैं:

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

और इसे उन तत्वों पर सक्षम करने से जिन्हें आप चाहते हैं कि उपयोगकर्ता चयन करने में सक्षम हो:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

1
पूर्ण ब्राउज़र समर्थन के लिए आपको अपने <body> या <div> तत्व में निम्नलिखित विशेषताएँ जोड़नी चाहिए: अचयनित = "हाँ" onselectstart = "असत्य" onmousedown = "असत्य वापस लौटें" / * देखभाल के साथ उपयोग करें, अंतिम विशेषता AFFECT EXISTING FUNCTOIONALITY है * /
डैन

11

बस सब कुछ संक्षेप में प्रस्तुत करना चाहता था:

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>

1
फ़ायरफ़ॉक्स के पुराने संस्करणों को HTML में एक और विशेषता जोड़ने की आवश्यकता हो सकती है: onmousedown = "false false"
Dan

2
::selection,::moz-selection {color:currentColor;background:transparent}

जैसा कि यहां कहा गया है w3schools.com/cssref/sel_selection.asp । यह अब तक किसी भी सीएसएस विनिर्देश का हिस्सा नहीं है, और फ़ायरफ़ॉक्स को -मोज़ की आवश्यकता है। तो सही होना चाहिए: :: - moz-Selection {color: currentColor; बैकग्राउंड: पारदर्शी} :: सिलेक्शन {color, currentColor; बैकग्राउंड: पारदर्शी}
व्लादिस्लाव

1
@ व्लादिस्लाव मोज उपसर्ग के बारे में अच्छी बात है। ईमानदारी से, w3schools पर भरोसा मत करो। इसका इतना भयानक स्रोत। MDN वास्तविक ब्राउज़र संगतता संस्करण और नोट देता है कि :: चयन सीएसएस मसौदे से हटा दिया गया था, लेकिन वापस जोड़ा गया था: developer.mozilla.org/en-US/docs/Web/CSS/::selection । एक अन्य नोट, फ़ायरफ़ॉक्स उपसर्ग की आवश्यकता को दूर करने के लिए तैयार है: Bugzilla.mozilla.org/show_bug.cgi?id=509958
BT

2

आप सभी चयन को अक्षम कर सकते हैं

.disable-all{-webkit-touch-callout: none;  -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

अब आप इनपुट और टेक्स्ट-एरिया सक्षम कर सकते हैं

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}

1

*इस उद्देश्य के लिए एक वाइल्ड कार्ड चयनकर्ता का उपयोग करें ।

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

अब, आईडी के साथ एक div के अंदर हर तत्व divका कोई चयन नहीं होगा।

डेमो



0

मैं सोमेथ विजय से सहमत हूं, आपको कुछ तत्वों को जोड़ने की आवश्यकता है, जिन्हें आप अचयनित करना चाहते हैं।

इसके अलावा, आप जावास्क्रिप्ट का उपयोग करके विशिष्ट मामलों में इस वर्ग को जोड़ सकते हैं। यहाँ उदाहरण सीएसएस की मदद से सामग्री को अचयनित करना


0

हर जगह चयन अक्षम करें

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

IE7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.