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

Question

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

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

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

Comments

क्या तत्व विचाराधीन तत्वों ने हाइलाइटिंग को अक्षम कर दिया है, क्या हाइलाइटिंग को स्टाइल या क्लास विशेषता में सीएसएस के साथ सक्षम किया गया है? या दूसरे शब्दों में, -webkit-user-select ect के लिए अन्य मूल्य हैं। सिवाय और कोई नहीं?

संबंधित: stackoverflow.com/questions/16600479/… = केवल कुछ बाल तत्वों को कैसे चुनने की अनुमति है

— जेके।

कुछ ब्राउज़रों में एक बग जहां "सिलेक्ट ऑल" (CTRL + A और CMD + A) करना अभी भी चीजों का चयन करता है। यह एक पारदर्शी चयन रंग के साथ लड़ा जा सकता है: ::selection { background: transparent; } ::-moz-selection { background: transparent; }

— DaAwesomeP

क्या मैं बस कह सकता हूं: कृपया ऐसा न करें। अपने अनुभव से, मैं अक्सर अधिक से अधिक कुछ पाठ का चयन नहीं करना चाहता हूं जो एक बटन के रूप में भी काम करता है, इसे कहीं और कॉपी-पेस्ट करने के लिए। यह अकल्पनीय रूप से करने में सक्षम नहीं होगा क्योंकि कुछ वेब डेवलपर मेरे लिए इस सुविधा को जानबूझकर अक्षम करने के लिए अपने रास्ते से बाहर चले गए। जब तक आपके पास बहुत, बहुत अच्छा कारण न हो, कृपया ऐसा न करें ।

— काजाक्स

साल 2017 में, यह बेहतर उपयोग करने के लिए रास्ता है postcssऔर autoprefixerऔर सेट ब्राउज़र संस्करण है, तो postcssसब कुछ शांत हो।

— AmerllicA

Answer 1

अद्यतन जनवरी, 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; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

---

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

---

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

Comments

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

— ब्लोसी

'उपयोगकर्ता-चयन'- मान: कोई नहीं | पाठ | टॉगल | तत्व | तत्व | सभी | विरासत - w3.org/TR/2000/WD-css3-userint-20000216

— Blowsie

वास्तव में -o- उपयोगकर्ता-चयन ओपेरा में लागू नहीं किया गया है। यह इसके बजाय IE के अचूक विशेषता को लागू करता है।

— टिम डाउन

किसी कारण के लिए, यह अकेले IE8 में काम नहीं कर रहा था, मैंने तब <div onselectstart="return false;">अपने मुख्य विभाग में जोड़ा ।

— रोबस्टा

यह मज़ाकीय है! एक ही काम करने के लिए इतने सारे अलग-अलग तरीके। चलो उपयोगकर्ता के चयन के लिए एक नया मानक बनाते हैं। हम इसे कॉल करेंगे 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;। आह, बहुत बेहतर।

— क्लाउडीयू

Answer 2

अधिकांश ब्राउज़रों में, यह CSS user-selectसंपत्ति पर मालिकाना भिन्नता का उपयोग करके प्राप्त किया जा सकता है , मूल रूप से प्रस्तावित और फिर CSS 3 में छोड़ दिया गया और अब CSS UI स्तर 4 में प्रस्तावित है :

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

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

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

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

---

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

Comments

आपको अपने उदाहरण से * चयनकर्ता को हटा देना चाहिए, जो वास्तव में कुशल है और वास्तव में इसे आपके उदाहरण में उपयोग करने की कोई आवश्यकता नहीं है?

— Blowsie

@Blowsie: मुझे ऐसा नहीं लगता है: CSS 2 कल्पना बताती है कि *.fooऔर .fooठीक इसके बराबर हैं (दूसरे मामले में, सार्वभौमिक चयनकर्ता ( *) निहित है), इसलिए ब्राउज़र quirks को रोकते हुए, मैं यह नहीं देख सकता कि सहित *नुकसान होगा प्रदर्शन। इसे शामिल करने की मेरी एक लंबे समय से चली आ रही आदत है *, जिसे मैंने मूल रूप से पठनीयता के लिए करना शुरू किया है: यह स्पष्ट रूप से एक नज़र में बताता है कि लेखक सभी तत्वों का मिलान करना चाहता है।

— टिम डाउन

oooh कुछ और पढ़ने के बाद, यह लगता है कि केवल un-effiecient है जब इसे कुंजी (righmost चयनकर्ता) यानी .unselectable * के रूप में उपयोग किया जाता है। आगे की जानकारी यहाँ code.google.com/speed/page-speed/docs/…

— Blowsie

वर्ग = "अचयननीय" का उपयोग करने के बजाय, बस विशेषता का चयन करें [अचयननीय = "पर"] {...}

— क्रिस कैलो

@Francisc: नहीं। जैसा कि मैंने पहले ब्लौसी को टिप्पणियों में कहा था, इससे कोई फर्क नहीं पड़ता।

— टिम डाउन

Answer 3

इंटरनेट एक्सप्लोरर के लिए एक जावास्क्रिप्ट समाधान है:

onselectstart="return false;"

Comments

के बारे में मत भूलना ondragstart!

— मथियास ब्येनेंस

यहाँ एक बात और। यदि आप इसे शरीर में जोड़ते हैं, तो आप IE में टेक्स्टारिस या इनपुट फ़ील्ड के अंदर पाठ का चयन करने में सक्षम नहीं होंगे। जिस तरह से मैंने इसे IE के लिए तय किया। body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }

— TheBrain

इसे jQuery - $ ("p") का उपयोग करते हुए एक विशेषता के रूप में जोड़ा जा सकता है। Attr ("onselectstart", "false false") यह IE8 में मेरे लिए एकमात्र विश्वसनीय तरीका था

— मैट

@Abudayah क्योंकि वे इंटरनेट एक्सप्लोरर के पुराने संस्करणों में काम नहीं करते हैं? वह, इस उत्तर के पूरे बिंदु की तरह।

— Pekka

?? मैं अभी भी हमेशा inputतत्वों का चयन कर सकता हूं भले ही मैं उपयोग करूं user-select: none। मुझे यह जानने की जरूरत है कि इसे कैसे रोका जा सकता है

— ओल्डबॉय

Answer 4

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

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

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

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

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

Comments

बटन की बात बिल्कुल मेरी प्रेरणा होगी।

— Kriem

एक और कारण यह है कि ग्रिड या टेबल में कई पंक्तियों का चयन करने के लिए Shift-क्लिक करना आवश्यक है। आप पाठ को हाइलाइट नहीं करना चाहते हैं, आप चाहते हैं कि यह पंक्तियों का चयन करे।

— गॉर्डन टकर

ऐसे कानूनी मुद्दे भी हैं जहां किसी और की सामग्री को कानूनी रूप से पुनर्प्रकाशित किया जा रहा है, लेकिन लाइसेंस में एक खंड को वेब प्रकाशकों को आसानी से कॉपी और पेस्ट करने से रोकने के लिए वेब प्रकाशकों की आवश्यकता होती है। यही कारण है कि मुझे इस सवाल का पता चला। मैं आवश्यकता से सहमत नहीं हूं, लेकिन जिस कंपनी के लिए मैं अनुबंध कर रहा हूं, वह इसे इस तरह लागू करने के लिए कानूनी रूप से बाध्य है।

— क्रेग एम

@CraigM सीएसएस शैली किसी व्यक्ति को HTML स्रोत को हथियाने और उसकी नकल करने से नहीं रोकती है। यदि आप अपनी सामग्री की सुरक्षा करना चाहते हैं तो आपको बेहतर तरीके खोजने होंगे।

— एजिले जेडी

अत्यधिक ड्रैग एंड ड्रॉप के साथ अत्यधिक इंटरैक्टिव वेब ऐप ... आकस्मिक हाइलाइटिंग एक बड़ी प्रयोज्य समस्या है।

— मार्क ह्यूजेस

Answer 5

यदि आप <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;
}

Comments

सुनिश्चित करें कि आप इनपुट क्षेत्रों को भी चयन योग्य बना सकते हैं: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }

— joshuadelange

एक आइटम को छोड़कर सभी कोड पर ब्राउज़र UI अपेक्षाओं को बंद करने के बारे में बहुत सावधान रहें। उदाहरण के लिए सूची आइटम <li /> पाठ के बारे में क्या?

— जेसन टी फेदरिंगम

बस एक अद्यतन ... फ़ायरफ़ॉक्स 21 के बाद से एमडीएन के अनुसार -moz-noneऔर noneसमान हैं।

— केविन फेगन

इसके लिए आप कर्सर जोड़ सकते हैं: डिफ़ॉल्ट और कर्सर: पाठ क्रमशः

— :)

बम। यानी। समाप्त। ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }[एक अव्यवस्थित सूची में सब कुछ का चयन करता है, और पूरे दृश्य ट्री को ट्रैश करने के बजाय इसे अन-सेलेबल बनाता है।] पाठ के लिए धन्यवाद। मेरी बटन सूची बहुत अच्छी लग रही है, और आईएमई (एंड्रॉइड क्लिपबोर्ड विजेट) लॉन्च करने के बजाय स्क्रीन टैपिंग और प्रेस करने के लिए सही ढंग से प्रतिक्रिया दे रही है।

— हाइपरसॉफ्ट सिस्टम

Answer 6

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

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

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

Comments

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

— kojow7

@ kojow7 "स्तरित" के विपरीत। पाठ के बजाय अन्य तत्वों के शीर्ष पर तैर रहा है। यह एसवीजी और पीएनजी छवियों के बीच अंतर के समान है।

— यति

यह जानकर आश्चर्य हुआ कि फ़ायरफ़ॉक्स को अभी भी 2019 में विक्रेता के उपसर्ग की आवश्यकता है। मैं केवल अवहेलना करता था user-select: none;, यह सोचकर कि मानक अब तक अपनाया जाएगा, लेकिन दुख की बात है कि यह नहीं है। आपको आश्चर्य होता है कि मानक समिति के लोग अभी भी क्या बहस कर सकते हैं। "नहीं, तुम लोग ... मुझे वास्तव में लगता है कि यह होना चाहिए user-select: cant;क्योंकि यह अधिक वर्णनात्मक जैसा है, तुम्हें पता है?" "हम इस पर गए हैं, माइक। हमें धर्मत्यागी को छोड़ना होगा, और यह बुरा रूप है!" "पर्याप्त, सब! हम अगले महीने फिर से इस मामले पर विचार-विमर्श करेंगे। मानक समिति की बैठक स्थगित!"

— मेंटलिस्ट

Answer 7

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

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

Comments

मैं ऐसा करने की सलाह नहीं दूंगा, क्योंकि यह वास्तव में इस मुद्दे को ठीक नहीं करता है; पाठ चयन अक्षम करना - यह केवल इसे छुपाता है। यह खराब प्रयोज्यता को जन्म दे सकता है, क्योंकि यदि मैं अपने कर्सर को पृष्ठ के चारों ओर खींचता हूं तो मैं इसे जाने बिना किसी भी मनमाने पाठ का चयन कर सकता हूं। यह सभी प्रकार की अजीब उपयोगिता "बग" पैदा कर सकता है।

— कीथामस

पारदर्शी क्षेत्रों के साथ पीएनजी-छवियों पर काम नहीं करता है: क्या आप हमेशा हल्के नीले रंग में चयन करेंगे ... कोई भी समाधान?

— AvL

Answer 8

WebKit के लिए समाधान :

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

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

Comments

transparentRgba के बदले में उपयोग करना Android पर Chrome 42 में भी काम करता है।

— क्लिंट पच्ल

Answer 9

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

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

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-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;
 }

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

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

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

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

Comments

उपयोग -ms-user-select: कोई नहीं; (IE10 के लिए) और आपका jQuery "अगर" यह होना चाहिए: अगर (($ .browser.msie && $ .browser.version <10) || $

— .browser.opera

सावधान रहो यार !!! फायरफॉक्स में इसका चयन करने के लिए आपको इसका उपयोग करना होगा-moz-user-select: Normal;

— निकोलस थेरी

@ mhenry1384 jQuery.browserको संस्करण 1.3 के रूप में पदावनत किया गया है और संस्करण 1.9 में हटा दिया गया है - api.jquery.com/jQuery.browser

— WynandB

@Wynand अच्छी बात है। लेकिन सीएसएस संपत्ति का उपयोग करने के लिए किस प्रकार की "फीचर डिटेक्शन" मौजूद है?

— टॉम ऑलर

@TomAuger आप jQuery.support का उपयोग कर सकते हैं, यह आपको एकल विशेषताओं की जांच करने की अनुमति देता है: लिंक

— Aequanox

Answer 10

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

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

Comments

आप titleविशेषता के रूप में भी उपयोग कर सकते हैं ।

— टूथब्रश

यह एक बहुत ही रचनात्मक समाधान है। खासकर अगर यह शीर्षक विशेषता का उपयोग करता है क्योंकि यह संभवतः स्क्रीन पाठकों के लिए बेहतर होगा।

— छद्मवसंत

मैंने इसे ( JSBin ) आज़माया और यह IE में काम नहीं करता है। दुर्भाग्य से पुराने IE केवल वे हैं जो user-selectकाम नहीं करते हैं।

— छद्मवसंत

यह एक बेहतरीन नॉन-जेएस विकल्प है जो क्रोम में काम करता है! बहुत बढ़िया!

— 15

भव्य! ......

— लोनली

Answer 11

आप उसके लिए CSS या JavaScript का उपयोग कर सकते हैं ।

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

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>

Answer 12

इसके अलावा इंटरनेट एक्सप्लोरर के लिए, आपको छद्म वर्गfocus (.ClassName: focus) और जोड़ने की आवश्यकता है outline-style: none।

.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; /* Internet Explorer  */
}

Comments

यह IE में तब तक काम करता है जब तक चयन classNameकक्षा के साथ एक तत्व पर शुरू नहीं होता है । इस देखें JSBin ।

— छद्मवसंत

Answer 13

सीएसएस में इन पंक्तियों को सम्मिलित करने का प्रयास करें और वर्ग संपत्ति पर "डिसइगलाइट" को कॉल करें:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

Answer 14

एक त्वरित हैक अद्यतन

यदि आप noneसभी CSS user-selectसंपत्तियों के लिए मान का उपयोग करते हैं (ब्राउज़र उपसर्गों सहित), तो एक समस्या है जो अभी भी इसके द्वारा उत्पन्न हो सकती है।

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

जैसा कि सीएसएस-ट्रिक्स कहते हैं, समस्या यह है:

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

आप नीचे एक का भी उपयोग कर सकते हैं enforceकि एक संपूर्ण तत्व चयनित हो जाता है जिसका अर्थ है कि यदि आप किसी तत्व पर क्लिक करते हैं, तो उस तत्व में लिपटे सभी पाठ चयनित हो जाएंगे। इसके लिए आपको बस इतना करना है कि मूल्य noneको बदलना है all।

.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  */
}

Answer 15

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

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

Answer 16

यदि आप कम और बूटस्ट्रैप का उपयोग कर रहे हैं तो आप लिख सकते हैं:

.user-select(none);

Answer 17

-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');

Answer 18

काम कर रहे

सीएसएस:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

यह काम करना चाहिए, लेकिन यह पुराने ब्राउज़रों के लिए काम नहीं करेगा। ब्राउज़र संगतता समस्या है।

Comments

उपसर्ग सीएसएस संपत्ति को कड़ाई से संपत्ति के उपसर्ग संस्करणों की सूची के अंत में होना चाहिए। यह अच्छा सही अभ्यास है, अन्य क्रोम / वेबकिट से एक "नया IE" बनाने के लिए बुरा अभ्यास है और वेबकी ब्राउज़र में नहीं बल्कि -webkit उपसर्ग समर्थन शुरू करने के रूप में बहुत अधिक है। देखिए, यह 2012 में पहले से ही था: dev.opera.com/articles/…

— फ्लेमस्टॉर्म

और मैं बोली:This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.

— फ्लेमस्टॉर्म

Answer 19

साथ एस.ए.एस.एस. (एससीएसएस वाक्य रचना)

आप एक साथ कर सकते हैं mixin :

// Disable selection
@mixin disable-selection {
    -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 */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

एक HTML टैग में:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

---

कोशिश करो इस में CodePen ।

यदि आप एक ऑटोप्रिफ़र का उपयोग कर रहे हैं तो आप अन्य उपसर्गों को हटा सकते हैं।

यहाँ ब्राउज़र संगतता ।

Answer 20

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

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

Comments

जब मैं मानता हूं कि यह उपयोगकर्ता के व्यवहार में बदलाव की उम्मीद करता है, तो यह "टिप्पणी जोड़ें" बटन जैसी चीजों के लिए समझ में आता है जो इस फॉर्म फ़ील्ड के बगल में बैठा है ...

— X-Istence

लेकिन क्या यह अनावश्यक कार्यान्वयन विवरणों को उजागर नहीं करता है? इनपुट या बटन के पाठ का चयन नहीं किया जा सकता है।

@anon: अधिकांश उपयोगकर्ता शायद आपके बटन के पाठ का चयन करने की कोशिश नहीं करेंगे, इसलिए व्यवहार में, यह वास्तव में बहुत मायने नहीं रखना चाहिए। इसके अलावा, ऐसा करने के लिए, उन्हें बटन के बाहर चयन करना शुरू करना होगा - यदि वे स्वयं बटन के अंदर क्लिक करते हैं, तो ऑनक्लिक हैंडलर इसके बजाय सक्रिय हो जाएगा। इसके अलावा, कुछ ब्राउज़र (जैसे सफ़ारी) वास्तव में आपको सामान्य बटन के पाठ का चयन करने देते हैं ...

— hbw

यदि आप एक चैट थ्रेड से टिप्पणियों के सेट का चयन कर रहे हैं और प्रत्येक टिप्पणी के आगे एक upvote / downvote बटन है, तो अन्य सामान के बिना पाठ का चयन करना अच्छा होगा। यह वही है जो उपयोगकर्ता अपेक्षा या चाहता है। वह हर टिप्पणी के साथ बटन लेबल कॉपी / पेस्ट नहीं करना चाहता।

— Mnebuerquo

और क्या होगा यदि आप उदाहरण के लिए एक बटन पर डबल क्लिक करते हैं जो आपको दूसरे पृष्ठ पर पुनर्निर्देशित करने के बजाय एक div खोलता है? फिर बटन के लिए पाठ को डबल-क्लिक के कारण चुना जाएगा!

— गिगाला

Answer 21

यह कुछ ब्राउज़रों में काम करता है:

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

बस रिक्त स्थान के बिना अल्पविराम द्वारा अलग किए गए चयनकर्ताओं के सामने अपने वांछित तत्वों / आईडी को जोड़ें, जैसे:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

अन्य उत्तर बेहतर हैं; इसे संभवत: अंतिम उपाय / कैटचेल के रूप में देखा जाना चाहिए।

Comments

कुछ चीजें हैं जो निश्चित रूप से जानी जा सकती हैं, लेकिन यह समाधान निश्चित रूप से सभी ब्राउज़रों में काम नहीं करता है।

— वोल्कर ई।

Answer 22

मान लीजिए कि divइस तरह दो एस हैं:

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

कर्सर को डिफ़ॉल्ट पर सेट करें ताकि यह उपयोगकर्ता को एक अचूक अनुभव दे।

सभी ब्राउज़रों में इसका समर्थन करने के लिए उपसर्ग का उपयोग करने की आवश्यकता है। उपसर्ग के बिना यह सभी उत्तरों में काम नहीं कर सकता है।

Answer 23

यह उपयोगी होगा यदि रंग चयन की भी आवश्यकता नहीं है:

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

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

Comments

कि color: inherit;शायद बनाओ ।

— याकोव आइंस्पैन

हाँ मुझे यह पसंद है। यह मोज़िला डॉक्स के

— बारिक धर्मवन

Answer 24

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

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

Answer 25

ध्यान दें:

सही उत्तर सही है कि यह आपको पाठ का चयन करने में सक्षम होने से रोकता है। हालाँकि, यह आपको पाठ को कॉपी करने से नहीं रोकता है, जैसा कि मैं अगले कुछ स्क्रीनशॉट (7 नवंबर 2014 तक) दिखाऊंगा।

जैसा कि आप देख सकते हैं, हम संख्याओं का चयन करने में असमर्थ थे, लेकिन हम उन्हें कॉपी करने में सक्षम थे।

पर परीक्षण किया गया: उबंटू , गूगल क्रोम 38.0.2125.111।

Comments

मुझे भी यही समस्या हुई है। मैक क्रोम पर 48.0.2564.116 और मैक सफारी 9.0.3 पर। विशेष रूप से, मैक फ़ायरफ़ॉक्स 43.0 चरित्र की नकल नहीं करता है, लेकिन उन दोनों के बीच अतिरिक्त धीरज रखता है। इस बारे में क्या किया जाना चाहिए?

— NHDaly

Answer 26

मुझे जिस परिणाम की आवश्यकता थी, उसे पाने के लिए मैंने पाया कि मुझे दोनों का उपयोग करना था ::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;
}

Comments

एक जवाब है कि काम करता है

— Oldboy

Answer 27

यह आसानी से किया जाता है:

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

---

वैकल्पिक रूप से:

मान लीजिए कि आपके पास ए <h1 id="example">Hello, World!</h1>। आपको h1इस मामले में Hello, World के आंतरिक भाग को हटाना होगा । फिर आपको CSS पर जाना होगा और यह करना होगा:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

अब यह बस सोचता है कि यह एक ब्लॉक-एलिमेंट है, न कि टेक्स्ट।

Answer 28

यह सीएसएस नहीं है, लेकिन यह एक उल्लेख के लायक है:

jQuery UI अक्षम चयन :

$("your.selector").disableSelection();

Answer 29

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

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/

Answer 30

यद्यपि यह छद्म तत्व CSS चयनकर्ता स्तर 3 के ड्राफ्ट में था, लेकिन इसे कैंडिडेट की सिफारिश के चरण के दौरान हटा दिया गया था, क्योंकि ऐसा प्रतीत होता था कि इसका व्यवहार विशेष रूप से नेस्टेड तत्वों के साथ, और इंटरऑपरेबिलिटी हासिल नहीं किया गया था।

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

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

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

p { color: white;  background: black; }

चयन पर

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

पाठ का चयन करने के लिए उपयोगकर्ताओं को अस्वीकार करना प्रयोज्य मुद्दों को बढ़ाएगा।

Comments

यही कारण है कि Netbeans ऑटो-पूरा होने का मुझे पता नहीं है कि मैं किस बारे में बात कर रहा हूं!

— halfer