क्या HTML पृष्ठ पर टेक्स्ट को अचयनित करने का कोई तरीका है?

Question

मैं कुछ टेक्स्ट तत्वों के साथ एक HTML UI बना रहा हूं, जैसे टैब नाम, जो चयनित होने पर खराब दिखते हैं। दुर्भाग्यवश, उपयोगकर्ता के लिए टैब नाम को डबल-क्लिक करना बहुत आसान है, जो इसे कई ब्राउज़रों में डिफ़ॉल्ट रूप से चुनता है।

मैं इसे जावास्क्रिप्ट चाल के साथ हल करने में सक्षम हो सकता हूं (मैं उन उत्तरों को भी देखना चाहता हूं) - लेकिन मुझे उम्मीद है कि सीएसएस/एचटीएमएल में कुछ ऐसा है जो सभी ब्राउज़रों में काम करता है।

Answer 1

सबसे ब्राउज़रों में इस सीएसएस का उपयोग कर प्राप्त किया जा सकता:

*.unselectable { 
    -moz-user-select: -moz-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 और ओपेरा के लिए, आप तत्व आप unselectable होना चाहते का 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")); 

Answer 2

ज़ेड-इंडेक्स उच्च के साथ पाठ क्षेत्र पर पूरी तरह से स्थिति divs और इन divs एक पारदर्शी GIF पृष्ठभूमि ग्राफिक देते हैं।

थोड़ा और विचार के बाद नोट - आपको इन 'कवर' को लिंक करने की आवश्यकता होगी, इसलिए उन पर क्लिक करने से आपको टैब पर जाना होगा, जिसका अर्थ है कि आप एंकर तत्व के साथ ऐसा कर सकते हैं display:box पर सेट करें, चौड़ाई और ऊंचाई सेट के साथ ही पारदर्शी पृष्ठभूमि छवि।

Answer 3

छवियों का भी चयन किया जा सकता है।

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

Answer 4

फ़ायरफ़ॉक्स के लिए आप "कोई भी नहीं" सीएसएस घोषणा "-मोज़-उपयोगकर्ता-चयन" लागू कर सकते हैं। उनके दस्तावेज, user-select देखें।

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

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

Answer 5

<script type="text/javascript"> 

/*********************************************** 
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* This notice MUST stay intact for legal use 
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 

***********************************************/ 


function disableSelection(target){ 

    if (typeof target.onselectstart!="undefined") //IE route 
     target.onselectstart=function(){return false} 

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route 
     target.style.MozUserSelect="none" 

    else //All other route (ie: Opera) 
     target.onmousedown=function(){return false} 

    target.style.cursor = "default" 
} 



//Sample usages 
//disableSelection(document.body) //Disable text selection on entire body 
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv" 


</script> 

संपादित

कोड जाहिरा तौर पर आता है http://www.dynamicdrive.com

Answer 6

से इस प्रयास करें:

<div onselectstart="return false">some stuff</div> 

सरल है, लेकिन प्रभावी ... सभी प्रमुख ब्राउज़रों के वर्तमान संस्करण में काम करता है।

Answer 7

यदि यह बुरा लगता है तो आप चयनित अनुभागों की उपस्थिति को बदलने के लिए सीएसएस का उपयोग कर सकते हैं।

Answer 8

एक उदाहरण के लिए चयन को दबाने के लिए वांछनीय क्यों हो सकता है, SIMILE TImeline देखें, जो टाइमलाइन का पता लगाने के लिए ड्रैग-एंड-ड्रॉप का उपयोग करता है, जिसके दौरान आकस्मिक लंबवत माउस आंदोलन लेबल को अप्रत्याशित रूप से हाइलाइट करने का कारण बनता है, जो अजीब लग रहा है।

Answer 9

मैं सीएसएस यहाँ http://www.quirksmode.org/css/selection.html वर्णित के साथ सफलता के कुछ स्तर की खोज कर रहा हूँ:

::selection { 
    background-color: transparent; 
} 

यह मुद्दों मैं एक आकाशवाणी आवेदन में कुछ ThemeRoller ul तत्वों के साथ हो रही थी के सबसे का ध्यान रखा (वेबकिट इंजन) । अभी भी एक छोटा (लगभग 15 x 15) पैच प्राप्त हो रहा है जो चयनित हो जाता है, लेकिन आधा पृष्ठ पहले चुना जा रहा था।

Answer 10

सफारी के लिए, -khtml-user-select: none, मोज़िला के -moz-user-select (या, जावास्क्रिप्ट में, target.style.KhtmlUserSelect="none";) की तरह।

Answer 11

फ़ायरफ़ॉक्स में निम्न कार्य काफी दिलचस्प है कि अगर मैं लिखने लाइन यह काम नहीं करता हटा दें। किसी के पास कोई अंतर्दृष्टि है कि लेखन लाइन की आवश्यकता क्यों है।

<script type="text/javascript"> 
document.write("."); 
document.body.style.MozUserSelect='none'; 
</script> 

Answer 12

कोई भी जावास्क्रिप्ट या सीएसएस विधि आसानी से फायरबग (फ़्लिकर के मामले की तरह) से घिरा हुआ है।

आप हाइलाइट रंग बदलने के लिए सीएसएस में ::selection pseudo-element उपयोग कर सकते हैं।

टैब लिंक होते हैं और dotted rectangle in active state चिंता का विषय है, तो आप भी कि निकाल सकते हैं (बेशक प्रयोज्य पर विचार करें)।

Answer 13

सही सीएसएस विविधताओं के सभी कर रहे हैं:

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

Answer 14

"अगर आपकी सामग्री वास्तव में है दिलचस्प है, तो वहाँ थोड़ा आप अंततः उसे बचाने के लिए कर सकते हैं "

यही सच है, लेकिन अधिकांश कॉपी, मेरे अनुभव में, कुछ भी नहीं किया है "अंततः" या geeks या निर्धारित plagiarists या उस तरह कुछ भी के साथ करो। यह आमतौर पर अनजान लोगों द्वारा अनौपचारिक प्रतिलिपि है, और यहां तक ​​कि एक सरल, आसानी से पराजित सुरक्षा (आसानी से हमारे जैसे लोगों द्वारा पराजित), उन्हें रोकने के लिए काफी अच्छा काम करता है। उन्हें "स्रोत देखें" या कैश या किसी और चीज़ के बारे में कुछ भी पता नहीं है ... हेक, वे यह भी नहीं जानते कि कोई वेब ब्राउज़र क्या है या वे एक का उपयोग कर रहे हैं।

Answer 15

जब selectability बंद करने से कई अवसरों हैं उपयोगकर्ता अनुभव को बढ़ाता है।

उदाहरण उपयोगकर्ता इससे जुड़ी किसी भी इंटरफ़ेस तत्वों के पाठ को कॉपी किए बिना पृष्ठ पर पाठ का एक ब्लॉक कॉपी करने के लिए अनुमति देने के लिए (कि पाठ के भीतर बीच-बीच में हो जाएगा प्रतिलिपि बनाई जा रही)।

Answer 16

यहां रुचि रखने वालों के लिए Sass mixin (scss) है। Compass/सीएसएस   3 में उपयोगकर्ता-चयन मिश्रित प्रतीत नहीं होता है।

// @usage use within a rule 
// ex. img {@include user-select(none);} 
// @param assumed valid user-select value 
@mixin user-select($value) 
{ 
    & { 
     -webkit-touch-callout: $value; 
     -webkit-user-select: $value; 
     -khtml-user-select: $value; 
     -moz-user-select: $value; 
     -ms-user-select: $value; 
     user-select: $value; 
    } 
} 

हालांकि कम्पास एक और अधिक मजबूत तरीके से करना होगा, यानी केवल विक्रेताओं आपके द्वारा चुने गए के लिए समर्थन जोड़ने।