JQuery का उपयोग करके पाठ चयन को कैसे अक्षम करें?

Question

क्या jQuery या jQuery-UI में दिए गए दस्तावेज़ तत्वों के लिए पाठ चयन को अक्षम करने के लिए कोई कार्यक्षमता है?

Comments

संभावित डुप्लिकेट: stackoverflow.com/questions/1319126/prevent-highlight-of-text

— जॉर्न शॉ-रोड

@ जॉन: क्या उपरोक्त लिंक आपके प्रश्न का उत्तर देता है? यदि ऐसा नहीं होता है, तो आप कुछ और विस्तार से बता सकते हैं कि आपकी स्थिति अलग कैसे है।

— जॉर्न शॉ-रोड

हाँ यह करता है। लेकिन यद्यपि उत्तर एक ही है, यह प्रश्न बहुत विशिष्ट है, इसलिए बहुत से सामान्य प्रश्न (जैसा मैंने किया) को ध्यान में रखते हुए उत्तर याद कर सकते हैं।

— दाविद ओहिया

@ Jhon: दूसरे प्रश्न का jQuery समाधान भी है।

— उमर आबिद

Answer 1

1.8 jQuery में, यह निम्नानुसार किया जा सकता है:

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

Comments

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

— उमर आबिद

@ उमर: मैं इससे अच्छी तरह वाकिफ हूं।

— एसएलएसी

@Bryce: बस नहीं। blog.slaks.net/2010/12/on-copy-prevention-in-html-part-2.html blog.slaks.net/2010/12/on-copy-prevention-in-html-part-3.html

— SLaks

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

— स्पेंसर रूपोर्ट

आप में से जो लोग कहते हैं कि "बस नहीं" पाठ चयन को अक्षम करने के लिए (या उस मामले के लिए SO पर कुछ भी), अपने दिमाग को थोड़ा सा खोलें। अक्सर लोग इसे सौंदर्य कारणों से अक्षम कर देते हैं, जैसे कि इसमें पाठ के साथ लेबल के दोहरे क्लिक पर पाठ चयन से बचना, आदि। इसलिए या तो प्रश्न का उत्तर दें, या एक वास्तविक काउंटर पॉइंट प्रदान करें और निर्दिष्ट करें कि आप किस बारे में बात कर रहे हैं, डॉन एक सामान्य तरीके से विचार को खरोंच मत करो।

— दुवेवाड

Answer 2

यदि आप jQuery UI का उपयोग करते हैं, तो उसके लिए एक विधि है, लेकिन यह केवल माउस चयन को संभाल सकता है (यानी CTRL+ Aअभी भी काम कर रहा है):

$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9

यदि आप jQuery UI का उपयोग नहीं करना चाहते हैं, तो कोड वास्तव में सरल है:

$(el).attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', /* you could also put this in a class */
           '-webkit-user-select':'none',/* and add the CSS class here instead */
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

Comments

jquery ui फ़ंक्शन बहुत अच्छा होगा, लेकिन यह सुरक्षा के समान स्तर की पेशकश नहीं करता है, यह सीधे चीजों को चुनने से रोकता है, लेकिन यदि आप किसी अन्य डोम ऑब्जेक्ट से चयन कर रहे हैं, तो आपको सीएसएस नियमों की भी आवश्यकता है - फ़ंक्शन का संचालन = function () {इसे वापस करें। bind (($। }

— chrismarx

ध्यान दें कि अक्षमता () jQuery के यूआई 1.9 में

— अपग्रेड की गई है

इसे आपके ब्राउज़र के आधार पर काम करने के लिए .on ('मूसडाउन', गलत) की भी आवश्यकता हो सकती है। होवेवर, मूसडाउन इवेंट्स को डिफ़ॉल्ट रूप से मारना खतरनाक है क्योंकि इससे मौजूदा कार्यक्षमता में ब्रेक लग सकता है

— Dan

ARG। यह कष्टप्रद है यह मूल्यह्रास किया गया है। बहुत समय है जब आप इसे वैध रूप से चाहते हैं।

— चकोर ले बट

मैं कुछ एंकर टेक्स्ट पर राइट-क्लिक संदर्भ मेनू बना रहा हूं, और मैं नहीं चाहता कि टेक्स्ट क्लिक पर चुने। तो हां, @ मोंक, यह एक वैध उदाहरण के रूप में योग्य होगा।

— वेन स्मॉलमैन

Answer 3

मुझे यह उत्तर ( टेक्स्ट टेबल की हाइलाइट को रोकना ) सबसे अधिक उपयोगी लगा, और शायद इसे IE संगतता प्रदान करने के दूसरे तरीके के साथ जोड़ा जा सकता है।

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

Comments

Chrome का उपयोग करता है -webkit-user-select

— tim

सामान्य रूप से jQuery या JS का उपयोग करने के बजाय चीजों को करने के लिए हमेशा CSS तरीके की सराहना करें। बस jQuery के एनिमेशन बनाम CSS बदलाव की तरह, ब्राउज़र में बनाया गया तरीका हमेशा सबसे अच्छा और सबसे कुशल होने वाला है।

— ब्रायन लीशमैन

Answer 4

यहाँ डिस्कनेक्ट चयन करने के लिए एक अधिक व्यापक समाधान, और गर्म चाबियों का कुछ को रद्द करने की है (जैसे Ctrl+ aऔर Ctrl+ c। टेस्ट: Cmd + aऔर Cmd+ c)

(function($){

  $.fn.ctrlCmd = function(key) {

    var allowDefault = true;

    if (!$.isArray(key)) {
       key = [key];
    }

    return this.keydown(function(e) {
        for (var i = 0, l = key.length; i < l; i++) {
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                allowDefault = false;
            }
        };
        return allowDefault;
    });
};


$.fn.disableSelection = function() {

    this.ctrlCmd(['a', 'c']);

    return this.attr('unselectable', 'on')
               .css({'-moz-user-select':'-moz-none',
                     '-moz-user-select':'none',
                     '-o-user-select':'none',
                     '-khtml-user-select':'none',
                     '-webkit-user-select':'none',
                     '-ms-user-select':'none',
                     'user-select':'none'})
               .bind('selectstart', false);
};

})(jQuery);

और कॉल उदाहरण:

$(':not(input,select,textarea)').disableSelection();

jsfiddle.net/JBxnQ/

यह फ़ायरफ़ॉक्स के पुराने संस्करणों के लिए पर्याप्त नहीं हो सकता है (मैं कौन सा नहीं बता सकता)। यदि यह सब काम नहीं करता है, तो निम्नलिखित जोड़ें:

.on('mousedown', false)

Comments

आप attr('unselectable', 'on')दो बार फोन क्यों करते हैं ? क्या यह एक टाइपो है या यह उपयोगी है?

— KajMagnus

इसने मेरे लिए बहुत काम किया, लेकिन मुझे ".each (फ़ंक्शन () {$ (यह) .attr ('अचयननीय', 'ऑन') (.bind ('selectstart'), फंक्शन () {return false;} को डिसेबल करना पड़ा। );}); " मेरे विशेष वेब ऐप (JQuery मोबाइल) के लिए अनुभाग, बस मामले में यह किसी की मदद करता है ..

— एंथनी

Answer 5

निम्नलिखित सभी सामान्य ब्राउज़रों (IE, क्रोम, मोज़िला, ओपेरा और सफारी) में सभी वर्गों 'आइटम' के चयन को अक्षम करेगा:

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);

Comments

जटिल नहीं - उत्कृष्ट! धन्यवाद। विकलांगों की तलाश के लिए; मैं .attr addded ( 'अक्षम', 'अक्षम')

— स्वेच्छाबलि

अद्यतन: .attr ('अक्षम', 'अक्षम') के बजाय, मैंने .attr ('आसानी से', 'आसानी से') का उपयोग किया। विकलांगों ने मेरे मॉडल चर को MVC (मॉडल चर शून्य है) में पोस्ट करने से रोकता है। केवल पढ़ने के लिए अभी भी (मैं बूटस्ट्रैप का उपयोग करें) की तलाश में निष्क्रिय कर दिया है और यह आइटम मूल्य पोस्टिंग की अनुमति देता है

— स्वेच्छाबलि

बहुत बढ़िया भाई, मैं बदलने के लिए इस कोड का उपयोग "सूचक-घटनाओं: कोई नहीं;", कि 11. संबंध IE में काम नहीं

— Shortys Oberto Dutari

Answer 6

        $(document).ready(function(){
            $("body").css("-webkit-user-select","none");
            $("body").css("-moz-user-select","none");
            $("body").css("-ms-user-select","none");
            $("body").css("-o-user-select","none");
            $("body").css("user-select","none");
        });

Comments

क्या आप कोड के अतिरिक्त उत्तर का एक संक्षिप्त सारांश लिख सकते हैं?

— जॉन्सका

Answer 7

यह जावास्क्रिप्ट का उपयोग करके आसानी से किया जा सकता है यह सभी ब्राउज़रों पर लागू होता है

<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") //For IE 
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
    target.style.MozUserSelect="none"
else //All other route (For Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
 </script>

इस फ़ंक्शन को कॉल करें

<script type="text/javascript">
   disableSelection(document.body)
</script>

Comments

यह एक महान है! लेकिन हम इस पर "फोकस" कैसे रोकते हैं?

— उत्परिवर्ती

यह उत्तर 2013 तक पुराना है

— Dan

Answer 8

यह वास्तव में बहुत सरल है। पाठ चयन को अक्षम करने के लिए (और + ड्रैग-इन-टेक्स्ट (जैसे क्रोम में एक लिंक) पर क्लिक करें), बस निम्नलिखित jQuery कोड का उपयोग करें:

$('body, html').mousedown(function(event) {
    event.preventDefault();
});

यह सब तब होता है जब आप अपने माउस ( mousedown()) bodyऔर htmlटैग में क्लिक करने से डिफ़ॉल्ट होने से रोकते हैं । आप बहुत आसानी से बस पाठ (जैसे परिवर्तन दो उद्धरण के बीच में बदलकर तत्व को बदल सकते हैं $('body, html')करने के लिए $('#myUnselectableDiv')बनाने के लिए myUnselectableDivहोने के लिए div, ठीक है, unselectable।

इसे दिखाने / साबित करने के लिए एक त्वरित स्निपेट:

$('#no-select').mousedown(function(event) {
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>

कृपया ध्यान दें कि यह प्रभाव पूर्ण नहीं है, और पूरी विंडो को चयन योग्य नहीं बनाते हुए सर्वश्रेष्ठ प्रदर्शन करता है। आप भी जोड़ना चाह सकते हैं

गर्म चाबियों का कुछ को रद्द करने (जैसे Ctrl+aऔर Ctrl+c। टेस्ट: Cmd+a और Cmd+c)

साथ ही, ऊपर व्लादिमीर के उत्तर के उस खंड का उपयोग करके। ( यहां उनकी पोस्ट पर जाएं )

Answer 9

CHROME के ​​लिए 1 लाइन समाधान:

body.style.webkitUserSelect = "none";

और एफएफ:

body.style.MozUserSelect = "none";

IE को "अचूक" विशेषता (तल पर विवरण) की आवश्यकता होती है।

मैंने क्रोम में इसका परीक्षण किया और यह काम करता है। यह संपत्ति विरासत में मिली है, इसलिए इसे शरीर के तत्व पर सेट करने से आपके संपूर्ण दस्तावेज़ में चयन अक्षम हो जाएगा।

यहाँ विवरण: http://help.dottoro.com/ljrlukea.php

यदि आप क्लोजर का उपयोग कर रहे हैं, तो बस इस फ़ंक्शन को कॉल करें:

goog.style.setUnselectable(myElement, true);

यह सभी ब्राउज़रों को पारदर्शी तरीके से संभालता है।

गैर-IE ब्राउज़र को इस तरह संभाला जाता है:

goog.style.unselectableStyle_ =
    goog.userAgent.GECKO ? 'MozUserSelect' :
    goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
    null;

यहां परिभाषित किया गया: http://closure-library.googlecode.com/svn/ .svn/ bc/4 / trunk / closure / goog / docs / closure_goog_style_style.js.source.html

IE भाग को इस तरह संभाला जाता है:

if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
  for (var i = 0, descendant; descendant = descendants[i]; i++) {
    descendant.setAttribute('unselectable', value);
  }
}

Answer 10

मुझे लगता है कि यह कोड सभी ब्राउज़रों पर काम करता है और इसके लिए कम से कम ओवरहेड की आवश्यकता होती है। यह वास्तव में उपरोक्त सभी उत्तरों का एक संकर है। मुझे पता है अगर तुम एक बग मिल!

सीएसएस जोड़ें:

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

JQuery जोड़ें:

(function($){
    $.fn.disableSelection = function() 
    {       
        $(this).addClass('no_select');              
        if($.browser.msie)
        {
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        }
    return this;            
};
})(jQuery);

वैकल्पिक: सभी बच्चों के तत्वों के लिए चयन को अक्षम करने के लिए, आप IE ब्लॉक को इसमें बदल सकते हैं:

$(this).each(function() {
    $(this).attr('unselectable','on')
    .bind('selectstart',function(){ return false; });
});

उपयोग:

$('.someclasshere').disableSelection();

Answer 11

मैंने सभी दृष्टिकोणों की कोशिश की है, और यह एक मेरे लिए सबसे सरल है क्योंकि मैं IWebBrowser2 का उपयोग कर रहा हूं और इसके साथ संघर्ष करने के लिए 10 ब्राउज़र नहीं हैं:

document.onselectstart = new Function('return false;');

पूरी तरह से मेरे लिए काम करता है!

Answer 12

इसका एक समाधान, उपयुक्त मामलों के लिए, <button>उस पाठ के लिए उपयोग करना है जिसे आप चयन नहीं करना चाहते हैं। यदि आप clickकुछ टेक्स्ट ब्लॉक पर घटना के लिए बाध्य कर रहे हैं , और यह नहीं चाहते कि पाठ चयन योग्य हो, तो इसे एक बटन में बदलने से शब्दार्थ में सुधार होगा और पाठ को चयनित होने से भी रोका जाएगा।

<button>Text Here</button>

Answer 13

सबसे अच्छा और सरल तरीका जो मैंने पाया, वह ctrl + c, राइट क्लिक को रोकता है। इस मामले में मैंने सब कुछ अवरुद्ध कर दिया है, इसलिए मुझे कुछ भी निर्दिष्ट करने की आवश्यकता नहीं है।

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});