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


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

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

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


4360
2018-05-05 20:29


मूल


क्या तत्व चुड़ैल के तत्वों को हाइलाइटिंग अक्षम कर दिया गया है, शैली या वर्ग विशेषता में सीएसएस में सक्षम हाइलाइटिंग है? या दूसरे शब्दों में, -webkit-user-select ect के लिए अन्य मान हैं। सिर्फ किसी के अलावा?
'उपयोगकर्ता-चयन'- मान: कोई नहीं | पाठ | टॉगल | तत्व | तत्व | सब | उत्तराधिकारी - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
uihacker.blogspot.com/2011/12/... - Enve
सम्बंधित: stackoverflow.com/questions/16600479/... = केवल कुछ बाल तत्वों को चुनने की अनुमति कैसे दें - JK.
कुछ ब्राउज़रों में एक बग जहां "सभी का चयन करें" (CTRL + A और CMD + A) अभी भी चीजें चुनते हैं। इसे पारदर्शी चयन रंग से लड़ा जा सकता है: ::selection { background: transparent; } ::-moz-selection { background: transparent; } - DaAwesomeP


जवाब:


अद्यतन जनवरी, 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>


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


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


6369
2017-12-05 11:45



अच्छा कोड molokoloco: डी, ​​हालांकि मैं व्यक्तिगत रूप से इसका उपयोग करने से दूर रहूंगा, क्योंकि कभी-कभी आपको विभिन्न ब्राउज़रों के लिए अलग-अलग मूल्यों की आवश्यकता हो सकती है, और यह जावास्क्रिप्ट पर निर्भर करता है। कक्षा बनाना और इसे अपने तत्व में जोड़ना या सीएसएस को अपने स्टाइल-शीट में अपने प्रकार के तत्व में लागू करना बहुत बुलेट प्रूफ है। - Blowsie
'उपयोगकर्ता-चयन'- मान: कोई नहीं | पाठ | टॉगल | तत्व | तत्व | सब | उत्तराधिकारी - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
वास्तव में -ओ-उपयोगकर्ता-चयन ओपेरा में लागू नहीं किया गया है। यह इसके बजाय आईई की अचयनित विशेषता लागू करता है। - Tim Down
कुछ कारणों से, यह अकेले आईई 8 में काम नहीं कर रहा था, मैंने फिर जोड़ा <div onselectstart="return false;"> मेरे मुख्य div के लिए। - robasta
यह मज़ाकीय है! एक ही काम करने के लिए कई अलग-अलग तरीके। चलिए उपयोगकर्ता चयन के लिए एक नया मानक बनाते हैं। हम इसे बुलाएंगे standard-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; standard-user-select: none;। आह, बहुत बेहतर है। - Claudiu


अधिकांश ब्राउज़रों में, यह सीएसएस पर मालिकाना विविधता का उपयोग करके हासिल किया जा सकता है 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 अपडेट करें: जब भी पेड़ में कोई नया तत्व जोड़ा जाता है, तो यह पेड़ ट्रैवर्सल फिर से चलाने की जरूरत होती है, लेकिन यह @ हान द्वारा एक टिप्पणी से लगता है कि इससे बचाना संभव है एक जोड़ना mousedown घटना हैंडलर सेट करता है unselectable घटना के लक्ष्य पर। देख http://jsbin.com/yagekiji/1 ब्योरा हेतु।


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


727
2017-11-13 16:05



आपको अपने उदाहरण से * चयनकर्ता को हटा देना चाहिए, यह वास्तव में कुशल है और वास्तव में आपके उदाहरण में इसका उपयोग करने की आवश्यकता नहीं है? - Blowsie
@ ब्लॉसी: मुझे ऐसा नहीं लगता: सीएसएस 2 स्पेक कहता है कि *.foo तथा .foo ठीक बराबर हैं (दूसरे मामले में, सार्वभौमिक चयनकर्ता (*) निहित है), इसलिए ब्राउजर क्विर्क को छोड़कर, मैं इसे देख नहीं सकता * प्रदर्शन को नुकसान पहुंचाएगा। यह शामिल करने के लिए मेरी एक लंबी स्थायी आदत है *, जिसे मैंने मूल रूप से पठनीयता के लिए करना शुरू किया: यह स्पष्ट रूप से एक नज़र में बताता है कि लेखक सभी तत्वों से मेल खाता है। - Tim Down
कुछ और पढ़ने के बाद ओह, ऐसा लगता है * कुंजी (सबसे ऊंचा चयनकर्ता) यानी अचयनित * के रूप में उपयोग करते समय केवल अनौपचारिक है। यहां और जानकारी code.google.com/speed/page-speed/docs/... - Blowsie
वर्ग = "अचयनित" का उपयोग करने के बजाय, केवल विशेषता चयनकर्ता का उपयोग करें [अचयनित = "चालू"] {...} - Chris Calo
@ फ्रांसिस्क: नहीं। जैसा कि मैंने टिप्पणियों में पहले ब्लॉसी से कहा था, इससे कोई फर्क नहीं पड़ता। - Tim Down


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

onselectstart="return false;"

165
2018-05-05 20:37



के बारे में मत भूलना ondragstart! - Mathias Bynens
यहाँ एक और बात है। यदि आप इसे शरीर में जोड़ते हैं तो आप IE में textareas या इनपुट फ़ील्ड के अंदर टेक्स्ट का चयन नहीं कर पाएंगे। जिस तरह से मैंने इसे आईई के लिए तय किया। body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; } - TheBrain
इसे jQuery - $ ("p") का उपयोग करके एक विशेषता के रूप में जोड़ा जा सकता है। Attr ("onselectstart", "झूठी वापसी") यह IE8 में मेरे लिए एकमात्र विश्वसनीय तरीका था - Matt
जब मेरे पास बहु सीएसएस समाधान हैं तो मैंने जावास्क्रिप्ट का उपयोग क्यों किया है! - Abudayah
@ अबुदायह क्योंकि वे इंटरनेट एक्सप्लोरर के पुराने संस्करणों में काम नहीं करते हैं? यह, इस उत्तर के पूरे बिंदु की तरह है। - Pekka 웃


सीएसएस 3 तक उपयोगकर्ता के चयन संपत्ति उपलब्ध हो जाती है, छिपकलीआधारित ब्राउज़र का समर्थन करते हैं -moz-user-select संपत्ति जो आपको पहले से मिली है। वेबकिट और ब्लिंक-आधारित ब्राउज़र समर्थन करते हैं -webkit-user-select संपत्ति।

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

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

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

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


159
2018-05-24 21:24



बटन चीज बिल्कुल मेरी प्रेरणा होगी। - Kriem
एक और कारण यह आवश्यक है कि ग्रिड या टेबल में एकाधिक पंक्तियों का चयन करने के लिए Shift-clicking है। आप पाठ को हाइलाइट नहीं करना चाहते हैं, आप इसे पंक्तियों का चयन करना चाहते हैं। - Gordon Tucker
ऐसे कानूनी मुद्दे भी हैं जहां किसी और की सामग्री कानूनी रूप से पुन: प्रकाशित की जा रही है लेकिन लाइसेंस में एक खंड के लिए वेब प्रकाशकों को पाठ को आसानी से कॉपी और पेस्ट करने से रोकने की आवश्यकता होती है। यही कारण है कि मुझे इस सवाल को ढूंढने के लिए प्रेरित किया। मैं आवश्यकता से सहमत नहीं हूं लेकिन जिस कंपनी के लिए मैं अनुबंध कर रहा हूं वह कानूनी रूप से इस तरह इसे लागू करने के लिए बाध्य है। - Craig M
@CraigM सीएसएस शैली किसी व्यक्ति को HTML स्रोत को पकड़ने और इसे कॉपी करने से नहीं रोकती है। अगर आप अपनी सामग्री की रक्षा करना चाहते हैं तो आपको बेहतर तरीके मिलना होगा। - Agile Jedi
बहुत से ड्रैग और ड्रॉप के साथ अत्यधिक इंटरैक्टिव वेब ऐप ... आकस्मिक हाइलाइटिंग एक बड़ी उपयोगिता समस्या है। - Marc Hughes


यदि आप छोड़कर सब कुछ पर पाठ चयन अक्षम करना चाहते हैं <p> तत्व, आप इसे सीएसएस में कर सकते हैं (के लिए बाहर देखो -moz-none जो उप-तत्वों में ओवरराइड की अनुमति देता है, जिसे अन्य ब्राउज़रों में अनुमति दी जाती है none):

* {
    -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;
}

120
2017-08-30 18:32



सुनिश्चित करें कि आप इनपुट फ़ील्ड का चयन भी कर सकते हैं: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; } - joshuadelange
एक आइटम को छोड़कर सभी कोड पर ब्राउज़र UI अपेक्षाओं को बंद करने के बारे में बहुत सावधान रहें। उदाहरण के लिए सूची आइटम <li /> टेक्स्ट के बारे में क्या? - Jason T Featheringham
फ़ायरफ़ॉक्स 21 के बाद से एमडीएन के मुताबिक बस एक अपडेट ... -moz-none तथा none समान हैं। - Kevin Fegan
इसके लिए आप कर्सर जोड़ सकते हैं: डिफ़ॉल्ट और कर्सर: क्रमशः पाठ:) - T4NK3R
आश्चर्यजनक! यह आपको धन्यवाद देता है! - Nam Nguyen


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

.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>

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


111
2018-05-05 20:46



क्या "फ्लैट" के विरोध में? - kojow7


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

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

101
2017-09-21 07:09



मैं ऐसा करने की सिफारिश नहीं करता, क्योंकि यह वास्तव में इस मुद्दे को ठीक नहीं करता है; पाठ चयन अक्षम करना - यह केवल इसे छुपाता है। इससे खराब उपयोगिता हो सकती है, क्योंकि अगर मैं पेज के चारों ओर अपना कर्सर खींचता हूं तो मैं इसे बिना किसी अज्ञात पाठ का चयन कर सकता हूं। यह सभी प्रकार की अजीब उपयोगिता "बग" का कारण बन सकता है। - Keithamus
पारदर्शी क्षेत्रों वाले पीएनजी-छवियों पर काम नहीं करता है: हमेशा एक हल्के नीले रंग में चयन करेगा ... कोई कामकाज? - AvL


के लिए कामकाज वेबकिट:

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

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


73
2017-11-11 19:53



का उपयोग करते हुए transparent आरजीबीए के बदले एंड्रॉइड पर क्रोम 42 में भी काम करता है। - Clint Pachl


मुझे हाइब्रिड सीएसएस + 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() ब्लॉक:

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

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

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


66
2018-05-01 11:36



उपयोग -एम-उपयोगकर्ता-चयन: कोई नहीं; (आईई 10 के लिए) और आपका jQuery "अगर" यह होना चाहिए: यदि (($ .browser.msie && $ .browser.version <10) || $ .browser.opera) - mhenry1384
सावधान रहो !!! फ़ायरफ़ॉक्स में इसे चुनने योग्य बनाने के लिए आपको उपयोग करना होगा -moz-user-select: Normal; - Nicolas Thery
@nicholasthery w3.org/TR/2000/WD-css3-userint-20000216#user-select - Tom Auger
@ mhenry1384 jQuery.browser संस्करण 1.3 के रूप में हटा दिया गया है और संस्करण 1.9 में हटा दिया गया है - api.jquery.com/jQuery.browser - WynandB
@Wynand अच्छा बिंदु। लेकिन कौन सी सीएसएस संपत्ति का उपयोग करने के लिए यह निर्धारित करने के लिए "फीचर डिटेक्शन" किस तरह का है? - Tom Auger


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

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


62
2017-12-23 14:05



आप भी इस्तेमाल कर सकते हैं title विशेषता के रूप में। - Toothbrush
यह एक बहुत रचनात्मक समाधान है। विशेष रूप से यदि यह शीर्षक विशेषता का उपयोग करता है क्योंकि यह शायद स्क्रीन पाठकों के लिए बेहतर होगा। - pseudosavant
मैं इसे करने की कोशिश की (JSBin) और यह आईई में काम नहीं करता है। दुर्भाग्य से पुराने आईईएस केवल एक ही हैं user-select के लिए काम नहीं करता है - pseudosavant