css टेक्स्ट चयन हाइलाइटिंग को अक्षम कैसे करें?




cross-browser highlighting (24)

अधिकांश ब्राउज़रों में, इसे सीएसएस user-select संपत्ति पर स्वामित्व विविधता का उपयोग करके हासिल किया जा सकता है, मूल रूप से प्रस्तावित किया जाता है और फिर CSS3 में त्याग दिया जाता है और अब सीएसएस यूआई स्तर 4 में प्रस्तावित किया जाता है:

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

आईई <10 और ओपेरा <15 के लिए, आपको उस तत्व की unselectable विशेषता का उपयोग करने की आवश्यकता होगी जिसे आप अचयनित करना चाहते हैं। आप एचटीएमएल में एक विशेषता का उपयोग कर इसे सेट कर सकते हैं:

<div id="foo" unselectable="on" class="unselectable">...</div>

अफसोस की बात यह संपत्ति विरासत में नहीं है, जिसका अर्थ है कि आपको <div> अंदर प्रत्येक तत्व के प्रारंभ टैग में एक विशेषता डालना है। यदि यह एक समस्या है, तो आप इसके बजाय किसी तत्व के वंशजों के लिए इसे करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

30 अप्रैल 2014 को अपडेट करें : जब भी पेड़ में कोई नया तत्व जोड़ा जाता है, तो इस पेड़ के ट्रैवर्सल को फिर से चलाने की जरूरत होती है, लेकिन यह @ हन द्वारा एक टिप्पणी से लगता है कि एक मूसडाउन इवेंट हैंडलर जोड़कर इसे टालना संभव है जो unselectable सेट करता है घटना का लक्ष्य। विवरण के लिए http://jsbin.com/yagekiji/1 देखें।

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

एंकरों के लिए जो स्टैक ओवरफ़्लो पृष्ठ के शीर्ष पर बटन (उदाहरण के लिए, प्रश्न , टैग , उपयोगकर्ता इत्यादि) जैसे कार्य करते हैं, या यदि उपयोगकर्ता गलती से पाठ का चयन करता है तो हाइलाइटिंग प्रभाव को अक्षम करने के लिए एक सीएसएस मानक तरीका है?

मुझे एहसास है कि यह जावास्क्रिप्ट के साथ किया जा सकता है, और थोड़ी सी गुगलिंग ने मोज़िला-केवल -moz-user-select विकल्प प्रदान किया।

क्या सीएसएस के साथ इसे पूरा करने के लिए एक मानक-अनुरूप तरीका है, और यदि नहीं, तो "सर्वोत्तम अभ्यास" दृष्टिकोण क्या है?


उपर्युक्त समाधान चयन में रोक दिया गया है, लेकिन उपयोगकर्ता अभी भी सोचता है कि आप पाठ का चयन कर सकते हैं क्योंकि कर्सर अभी भी बदलता है। इसे स्थिर रखने के लिए, आपको अपना सीएसएस कर्सर सेट करना होगा:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

यह आपके पाठ को पूरी तरह से फ्लैट बना देगा, जैसे कि यह डेस्कटॉप एप्लिकेशन में होगा।


आईई के लिए एक जावास्क्रिप्ट समाधान है

onselectstart="return false;"

त्वरित हैक अपडेट: मार्च 2017 - CSS-Tricks

यदि आप सभी सीएसएस उपयोगकर्ता के लिए मूल्य 'कोई नहीं' डालते हैं, जैसा कि नीचे दिखाया गया है, वहां एक समस्या है जो अभी भी इस द्वारा हो सकती है।

.div{
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none;   /* Firefox all */
  -ms-user-select: none;  /* IE 10+ */
   user-select: none;  /* Likely future */ 
}

के रूप में CSS-Tricks का कहना है की समस्या है

  • यदि आप इसके चारों ओर तत्व चुनते हैं तो वेबकिट अभी भी पाठ की प्रतिलिपि बनाने की अनुमति देता है।

तो आप यह भी लागू करने के लिए नीचे दिए गए एक का उपयोग कर सकते हैं कि एक संपूर्ण तत्व चयनित हो रहा है जो समस्या का समाधान है। आपको बस इतना करना है कि 'कोई नहीं' मूल्य 'सभी' में बदल रहा है जो इस तरह दिखेगा

.force-select {  
  -webkit-user-select: all;  /* Chrome 49+ */
  -moz-user-select: all;     /* Firefox 43+ */
  -ms-user-select: all;      /* No support yet */
  user-select: all;          /* Likely future */   
}

आप फ़ायरफ़ॉक्स और सफारी में ऐसा कर सकते हैं (क्रोम भी?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

जावास्क्रिप्ट के बिना मेरा समाधान जांचें:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

मेरी तकनीक के साथ पॉपअप मेनू लागू: http://jsfiddle.net/y4Lac/2/


मुझे परिणाम प्राप्त करने के लिए मुझे पता चला कि मुझे दोनों ::selection और user-select का उपयोग करना था

input.no-select:focus { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

input.no-select::selection { 
    background: transparent; 
}

input.no-select::-moz-selection { 
    background: transparent; 
}

यद्यपि यह छद्म-तत्व सीएसएस चयनकर्ता स्तर 3 के ड्राफ्ट में था, लेकिन इसे उम्मीदवार अनुशंसा चरण के दौरान हटा दिया गया था, क्योंकि ऐसा लगता है कि इसका व्यवहार विशेष रूप से घोंसला वाले तत्वों के साथ निर्दिष्ट था, और अंतःक्रियाशीलता हासिल नहीं की गई थी।

यह कैसे चर्चा की जा रही है :: कैसे नेस्टेड तत्वों पर चयन काम करता है

ब्राउज़र में इसे लागू करने के बावजूद, आप टैब डिज़ाइन (आपके मामले में) के चयन पर समान रंग और पृष्ठभूमि रंग का उपयोग करके टेक्स्ट का भ्रम नहीं चुन सकते हैं।

सामान्य सीएसएस डिजाइन

p { color: white;  background: black; }

चयन पर

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

पाठ का चयन करने के लिए उपयोगकर्ताओं को अस्वीकार करने से उपयोगिता के मुद्दों में वृद्धि होगी।


WebKit लिए वर्कअराउंड:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);

मैंने इसे कार्डफ्लिप उदाहरण में पाया।


जब तक सीएसएस 3 की user-select संपत्ति उपलब्ध न हो जाए, तब तक Gecko आधारित ब्राउज़र -moz-user-select संपत्ति का समर्थन करते हैं जो आपको पहले से मिला है। WebKit और ब्लिंक-आधारित ब्राउज़र -webkit-user-select property का समर्थन करते हैं।

यह निश्चित रूप से ब्राउज़र में समर्थित नहीं है जो गीको प्रतिपादन इंजन का उपयोग नहीं करते हैं।

ऐसा करने के लिए कोई "मानक" अनुपालन त्वरित और आसान तरीका नहीं है; जावास्क्रिप्ट का उपयोग करना एक विकल्प है।

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

एकमात्र जगह जिसे मैं उपयोगी साबित कर सकता हूं वह यह है कि यदि आपके पास फॉर्म के लिए बटन हैं जिन्हें प्रतिलिपि और चिपकाया नहीं जाना चाहिए यदि कोई उपयोगकर्ता वेबसाइट कॉपी और पेस्ट करता है।


रंगीन चयन की आवश्यकता नहीं होने पर यह उपयोगी होगा:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... अन्य सभी ब्राउज़र फिक्स। यह Internet Explorer 9 या बाद में काम करेगा।



मैंने CSS-Tricks वेबसाइट से सीखा है।

user-select: none;

और यह भी:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

उन लोगों के लिए जिन्हें एंड्रॉइड ब्राउजर में टच इवेंट के साथ हासिल करने में परेशानी है, उनका उपयोग करें:

html,body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

इसके अलावा इंटरनेट एक्सप्लोरर के लिए, आपको छद्म वर्ग फोकस (.ClassName: फोकस) और रूपरेखा-शैली जोड़ने की आवश्यकता है : कोई भी नहीं

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style:none;/*IE*/
}

इसका उपयोग करने का प्रयास करें:

::selection {
    background: transparent;
}

और यदि आप निर्दिष्ट करना चाहते हैं कि किसी विशिष्ट तत्व के अंदर चयन न करें, तो चयन नियम से पहले तत्व वर्ग या आईडी डालें, जैसे कि:

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}

यदि आप Less और Bootstrap का उपयोग कर रहे हैं तो आप लिख सकते हैं:

.user-select(none);

मुझे हाइब्रिड सीएसएस + jQuery समाधान पसंद है।

<div class="draggable"></div> अंदर सभी तत्वों को अचयनित करने के लिए, इस सीएसएस का उपयोग करें:

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }

और फिर, यदि आप jQuery का उपयोग कर रहे हैं, तो इसे $(document).ready() अंदर जोड़ें $(document).ready() ब्लॉक:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

मुझे लगता है कि आप अभी भी कोई भी इनपुट तत्व इंटरैक्टिव होना चाहते हैं, इसलिए :not() छद्म चयनकर्ता। यदि आप परवाह नहीं है तो आप '*' उपयोग कर सकते हैं।

चेतावनी: IE9 को इस अतिरिक्त jQuery टुकड़े की आवश्यकता नहीं हो सकती है, इसलिए आप वहां एक संस्करण जांच जोड़ना चाहेंगे।


-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
-webkit-user-select:none;
-moz-user-select:none;
onselectstart="return false;"
::selection { background: transparent; }
::-moz-selection { background: transparent; }

* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}

p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
<div class="draggable"></div>
.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }
if ($.browser.msie) $('.draggable').find(':not(input)').attr('unselectable', 'on');

मोज़िला-केवल संपत्ति के अलावा, नहीं, केवल मानक सीएसएस (अब तक) के साथ टेक्स्ट चयन को अक्षम करने का कोई तरीका नहीं है।

यदि आप देखते हैं, स्टैक ओवरफ़्लो उनके नेविगेशन बटन के लिए टेक्स्ट चयन अक्षम नहीं करता है, और मैं ज्यादातर मामलों में ऐसा करने के खिलाफ अनुशंसा करता हूं, क्योंकि यह सामान्य चयन व्यवहार को संशोधित करता है और इसे उपयोगकर्ता की अपेक्षाओं के साथ संघर्ष करता है।


इसे पहले div में जोड़ें जिसमें आप पाठ के लिए चयन को अक्षम करना चाहते हैं:

onmousedown='return false;' 
onselectstart='return false;'

.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

हालांकि, यह सबसे अच्छा तरीका नहीं है।


अद्यतन जनवरी, 2017:

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

सभी सही सीएसएस विविधताएं हैं:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

ध्यान दें कि यह एक गैर-मानक सुविधा है (यानी किसी भी विनिर्देश का हिस्सा नहीं)। यह हर जगह काम करने की गारंटी नहीं है, और ब्राउज़र के बीच कार्यान्वयन में भिन्नता हो सकती है और भविष्य में ब्राउज़र इसके लिए समर्थन छोड़ सकते हैं।

मोज़िला डेवलपर नेटवर्क दस्तावेज़ीकरण में अधिक जानकारी मिल सकती है।


आप इसके लिए सीएसएस या जावास्क्रिप्ट का उपयोग कर सकते हैं, पुरानी आईईएस जैसे पुराने ब्राउज़र में जावास्क्रिप्ट तरीका समर्थित है, लेकिन यदि यह आपका मामला नहीं है, तो सीएसएस के तरीके का उपयोग करें:

HTML / जावास्क्रिप्ट:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>





textselection