2010-11-30 13 views
11

मैं अपने एचटीएमएल के कुछ हिस्सों को चुनने योग्य कैसे बना सकता हूं?मैं अपने एचटीएमएल के कुछ हिस्सों को चुनने योग्य कैसे बना सकता हूं?

मैं कुछ पूरी तरह से तैनात divs कि यदि कोई उपयोगकर्ता मेरी पृष्ठ की सामग्री का चयन करने की कोशिश करता है, तो चयनित हो रही रखने के लिए है।

वहाँ बनाने के लिए यह (जैसे उन divs के रूप में) तो कुछ तत्वों चयन नहीं कर रहे हैं एक तरीका है?

संपादित करें: मुख्य मुद्दा है जब कोई प्रतियां इन निरपेक्ष div के और फिर उन्हें अपनी साइट, IE पर रिच टेक्स्ट संपादक टूट जाता है पर अमीर पाठ संपादक में चिपकाता है।

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

हालांकि, कि IE में काम नहीं करता:

+0

संभवतः संबंधित सवाल: http: // stackoverflow।कॉम/प्रश्न/9 24 9 16/है-ए-वे-टू-मेक-ए-डीवी-अचयनित –

+0

नीचे सुझाए गए jQuery समाधान को आशाजनक लग रहा है, अगर यह आपके लिए काम नहीं करेगा, तो इसे कुछ बनाने के लिए जटिल नहीं होना चाहिए शुद्ध जावास्क्रिप्ट के साथ-साथ, बस हमें बताएं। :) –

उत्तर

4

तुम सिर्फ चयन आयत को छिपाना चाहते हैं, तो आप

element::selection { background: transparent } 

उपयोग कर सकते हैं और यह छिपकली

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

आप अपने उपयोगकर्ताओं को क्लिपबोर्ड पर प्रतिलिपि बनाने सही पाठ का चयन करने में मदद करना चाहते हैं के लिए समकक्ष है, आप तत्व को दूर ले जा सकते हैं। आमतौर पर ब्राउज़र तत्वों के क्रम को बनाए रखते हैं क्योंकि उन्हें चुनते समय HTML में परिभाषित किया जाता है। हालांकि यह सही समाधान नहीं है, आप तत्व के कोड को या तो <body> टैग के बहुत शुरुआत या बहुत अंत में HTML में रख सकते हैं। इस तरह, यदि उपयोगकर्ता पृष्ठ के मध्य में कुछ चुनता है, तो तत्व हस्तक्षेप करने के लिए "बहुत दूर" होगा।

+0

+1 - हाँ, मैं उन्हें कॉपी करने के लिए सही टेक्स्ट का चयन करने में मदद करना चाहता हूं। पूर्ण divs को चुनने के लिए बहुत दूर डालने के बारे में अच्छा सुझाव। – Kyle

+0

+1 @Athari: यह सही समाधान है। चूंकि आपका 'div' पूर्ण स्थिति है, इसलिए आप HTML के भीतर दिखाई देने वाले पुन: क्रमबद्ध कर सकते हैं। यह उपयोगकर्ता को सही टेक्स्ट का चयन करने में मदद करेगा। असल में, मैं आपको इसे ध्यान में रखने के लिए @ केली की सराहना करता हूं, क्योंकि जब मैं चयन क्लिप करने का प्रयास करता हूं तो यादृच्छिक 'div' का चयन होने पर मुझे वास्तव में परेशान होता है। – bguiz

3

आप एक निश्चित तत्व "अदृश्य" का चयन करने के लिए ::selection छद्म तत्व का उपयोग कर सकते हैं।

+0

लेकिन वे आईई 9 में इसका समर्थन करेंगे! –

9

IE के लिए, विशेषता unselectable="ON" जोड़ें। (संपादित करें: हालांकि यह पूरी तरह से मदद नहीं करेगा)

गीको के लिए, सीएसएस शैली -moz-user-select: none जोड़ें।

वेबकिट के लिए, सीएसएस शैली -webkit-user-select: none जोड़ें।

+0

ने 'अचयनित = "चालू" कोशिश की और यह काम नहीं किया। एमएसडीएन पढ़ना कहता है: 'अनन्य विशेषता वाले तत्व के साथ एक तत्व को उस चयन में शामिल किया जा सकता है जो तत्व के बाहर कहीं से शुरू होता है।' इसलिए जब भी वे सामग्री क्षेत्र की प्रतिलिपि बनाने का प्रयास करते हैं तो यह अनजाने में चुने जाते हैं। – Kyle

+0

+1 ग्रेट! और अचयनित विशेषता ओपेरा में भी काम करती है। –

+0

यह क्यों कम किया गया था? – SLaks

4

इस लेख एक क्रॉस-ब्राउज़र समाधान के साथ मदद कर सकता है:

jQuery.fn.extend({ 
    disableSelection : function() { 
      return this.each(function() { 
        this.onselectstart = function() { return false; }; 
        this.unselectable = "on"; 
        jQuery(this).addClass('unselectable'); 
      }); 
    } 
}); 

और इस तरह इसे लागू करने: (jQuery का उपयोग करती) http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/

सिद्धांत में

, तो आप इस का उपयोग कर jQuery कोर का विस्तार कर सकते हैं:

// disable selection on selected objects 
$('.myClass').disableSelection(); 

क्या आप वाकई अपने स्टाइलशीट में इस राशि बनाना चाहिए:

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

के रूप में अगर यह मूल रूप से करता है SLaks और साइम क्या उल्लेख किया है लग रहा है। मैं इसे करने की कोशिश नहीं की है, लेकिन मैं अगर यह

+0

@ सेबेस्टियन विभिन्न उपयोगकर्ता-चयन गुणों का उपभोग करते हुए, यह कक्षा को परिभाषित करने के लिए और अधिक कुशल होगा: 'अचयनित {उपयोगकर्ता-चयन: कोई नहीं; -moz-उपयोगकर्ता के चयन: कोई नहीं; ...} 'और फिर बस लिखने के लिए: '$ (यह) .addClass (" अचयनित ")'। –

+0

@ सैम लेकिन आईई के बारे में कैसे? मुझे लगता है कि 'this.unselectable = "चालू";' एक्सप्लोरर का ख्याल रखता है। अन्यथा, आप पूरी तरह से सही हैं। –

+0

@ सेबेस्टियन आईई के लिए यह लाइन ठीक है। लेकिन सीएसएस() विधियों के साथ उन 5 लाइनों को addClass() के साथ प्रतिस्थापित किया जाना चाहिए जैसा मैंने कहा था। –

2

jQuery समाधान काम करता है पता करने के लिए दिलचस्पी होगी:

$(".unselectable").disableSelection(); 
संबंधित मुद्दे