क्या डीआईवी को अचूक बनाने का एक तरीका है?

140

यहां आपके लिए एक दिलचस्प सीएसएस प्रश्न हैं!

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

css

— Whozumommy
स्रोत

क्या आप एक जावास्क्रिप्ट समाधान से खुश होंगे?

— joshcomley

203

मैंने कुछ समय पहले चयन को अक्षम करने के लिए एक साधारण jQuery एक्सटेंशन लिखा था: jQuery में चयन अक्षम करना । आप इसके माध्यम से आह्वान कर सकते हैं$('.button').disableSelection();

वैकल्पिक रूप से, CSS (क्रॉस-ब्राउज़र) का उपयोग कर:

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

— aleemb
स्रोत

@kasperTaeymans कि बाहर इशारा करने के लिए धन्यवाद। स्निपेट को अपडेट किया।

— प्रात:

@kasperTaeymans लेकिन यह W3C के काम के मसौदे में है ... मैं इसे सिर्फ मामले में शामिल करूँगा।

— कैमिलो मार्टिन

2

मूल उत्तर से कुछ भी दूर नहीं करने के लिए, जिसे मैंने उखाड़ा, लेकिन यह 3+ साल पुराना है। इसलिए मैंने टच इंटरफ़ेस के लिए अतिरिक्त सेटिंग के साथ नीचे एक उत्तर ( stackoverflow.com/questions/924916/… ) जोड़ा।

— ऐनी गुन

यही मैं जंगम बूटस्ट्रैप मोडल हैडर के लिए चाहता था! धन्यवाद!

— डेवलपर

62

निम्नलिखित सीएसएस कोड लगभग आधुनिक ब्राउज़र काम करता है:

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

IE के लिए, आपको जेएस का उपयोग करना चाहिए या HTML टैग में विशेषता सम्मिलित करनी चाहिए।

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

— KimKha
स्रोत

का उद्देश्य क्या है unselectable="on"? क्या आप एक संदर्भ दे सकते हैं

— उपयोगकर्ता

4

मुझे यहाँ मिला: msdn.microsoft.com/en-us/library/hh801966(v=vs.85).aspx लेकिन मैंने वास्तव में IE पर परीक्षण किया था, और यह सही ढंग से काम करता है।

— KimKha

1

मुझे यकीन नहीं है। लेकिन </ code> पर "<code> unselectable =" को IE में शामिल किया जा सकता है, और W3C सत्यापनकर्ता इस विशेषता को स्वीकार नहीं करता है।

— KimKha

हालांकि यह आधुनिक ब्राउज़रों पर काम करता है, यह W3C द्वारा अभी तक निर्दिष्ट नहीं है।

— सिरो सेंटिल्ली 郝海东冠状 iro 事件法轮功 '

41

बस aleemb के मूल को अपडेट करते हुए, css में कुछ अतिरिक्त परिवर्धन के साथ बहुत उत्कीर्ण उत्तर।

हम निम्नलिखित कॉम्बो का उपयोग कर रहे हैं:

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

हमें वेबकिट-टच प्रविष्टि: http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html जोड़ने का सुझाव मिला

२०१५ अप्रैल: बस एक बदलाव के साथ मेरे खुद के जवाब को अपडेट करना जो काम आ सकता है। यदि आपको मक्खी पर DIV का चयन करने योग्य / अचयनित बनाने की आवश्यकता है और Modernizr का उपयोग करने के लिए तैयार हैं , तो निम्नलिखित जावास्क्रिप्ट में बड़े करीने से काम करता है:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

— ऐनी गुन
स्रोत

आवेदन user-select: noneकरने divसे कोई प्रभाव नहीं पड़ता है। मुझे यकीन है कि user-selectकेवल पाठ के लिए है। वहाँ एक divअचूक बनाने के लिए कोई अन्य तरीके हैं ?

— ओल्डबॉय

22

जैसा कि जोहान्स ने पहले ही सुझाव दिया है, एक पृष्ठभूमि-छवि संभवतः सीएसएस में इसे प्राप्त करने का सबसे अच्छा तरीका है।

एक जावास्क्रिप्ट समाधान भी सभी लोकप्रिय ब्राउज़रों में प्रभावी होने के लिए "ड्रैगस्टार्ट" को प्रभावित करेगा।

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

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

धनी

— kim3er
स्रोत

13

आप pointer-events: none;अपने CSS में उपयोग कर सकते हैं

div {
  pointer-events: none;
}

— लिन डैम
स्रोत

6

आप यह कोशिश कर सकते हैं:

<div onselectstart="return false">your text</div>

— Fortega
स्रोत

1

अभी भी डबल क्लिक के साथ चयन करना संभव है।

— छत

6

Textarea पर्याप्त के लिए एक साधारण पृष्ठभूमि छवि नहीं होगा?

— एक छोटा सा सिक्का
स्रोत

1

ठीक है, मेरा मतलब वाटरमार्क था, लेकिन एक पारदर्शी पृष्ठभूमि छवि भी काम कर सकती है। इसके अलावा, आपको बहुत छोटी छवियों को टाइल नहीं करना चाहिए क्योंकि कुछ ब्राउज़रों को उस मामले में अचानक धीमा हो जाता है :)

— जॉय

खासकर जब से एक 1000x1000 पारदर्शी png (या gif) केवल 4kb है।

— रयान फ्लोरेंस

अधिक 1 KiB की तरह, वास्तव में :-)

— जॉय

4

WebKit ब्राउज़र (यानी Google Chrome और Safari) में मोज़िला के -मोज़-उपयोगकर्ता-चयन के समान CSS समाधान है: कोई नहीं

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

— जेम्स
स्रोत

2

IOS में भी अगर आप ग्रे-पारदर्शी दिखने वाले ओवरले से छुटकारा पाना चाहते हैं, तो css जोड़ें:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

— आर्टजोम कुरपोव
स्रोत

-1

उपयोग

onselectstart = "गलत लौटें"

यह आपकी सामग्री को कॉपी करने से रोकता है।

— Anuraj
स्रोत

4

यह समाधान दूसरों द्वारा पोस्ट किया गया है।

— dazedconfused

-1

सुनिश्चित करें कि आपने चयन के लिए कार्य करने के लिए z- इंडेक्स के लिए स्पष्ट रूप से निरपेक्ष या रिश्तेदार के रूप में स्थिति निर्धारित की है। मेरे पास एक समान मुद्दा था और इसने मेरे लिए इसे हल किया।

— एरिक ग्रोटके
स्रोत

-2

आपके उपयोग के मामले में निश्चित नहीं है, लेकिन आप इसे खींचने योग्य बना सकते हैं।

— कोस्टा
स्रोत

इसका एक अप्रिय अभी तक मान्य जवाब नहीं है।

— रस्टी