Come disabilitare la selezione del testo usando jQuery?


198

JQuery o jQuery-UI hanno qualche funzionalità per disabilitare la selezione del testo per determinati elementi del documento?



@John: il link qui sopra risponde alla tua domanda? In caso contrario, potresti voler aggiungere qualche dettaglio in più su come la tua situazione è diversa.
Jørn Schou-Rode,

1
Sì lo fa. Ma sebbene la risposta sia la stessa, quella domanda è molto specifica, quindi molti possono mancare quella risposta avendo in mente una domanda più generale (come ho fatto io).
Dawid Ohia,

@Jhon: anche l'altra domanda ha una soluzione jQuery.
Omar Abid,

Risposte:


274

In jQuery 1.8, questo può essere fatto come segue:

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

1
L'alternativa JavaScript funziona solo per IE. "onselectstart" non è disponibile per altri browser
Omar Abid,

13
@Omar: ne sono ben consapevole.
SLaks,


11
Grazie per questo. Stavo lavorando su un cursore di trascinamento e avevo bisogno di un modo in cui il testo non sarebbe stato selezionato nel processo.
Spencer Ruport,

35
A quelli di voi che dicono "semplicemente non" alla disabilitazione della selezione del testo (o qualsiasi altra cosa su SO per quella materia), aprite un po 'le vostre menti. Spesso le persone lo disabilitano per motivi estetici come evitare la selezione del testo con un doppio clic su un'etichetta con testo all'interno, ecc. Quindi, o rispondi alla domanda o fornisci un vero punto di riferimento e specifica di cosa stai parlando negando, don basta solo grattare l'idea in modo generale.
Dudewad,

102

Se usi l'interfaccia utente di jQuery, esiste un metodo per farlo, ma può gestire solo la selezione del mouse (ovvero CTRL+ Afunziona ancora):

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

Il codice è davvero semplice, se non si desidera utilizzare l'interfaccia utente jQuery:

$(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; });

1
la funzione jiery ui sarebbe ottima, ma non offre lo stesso livello di protezione, impedisce di selezionare le cose direttamente, ma se stai trasportando una selezione da un altro oggetto dom, hai bisogno anche delle regole CSS - ecco la funzione = function () {return this.bind (($ .support.selectstart? "selectstart": "mousedown") + ".ui-disableSelection", function (event) {event.preventDefault ();}); }
chrismarx,

2
Si noti che disableSelection () è obsoleto nell'interfaccia utente di jQuery 1.9
mar10

Potrebbe anche richiedere .on ('mousedown', false) per funzionare, a seconda del browser. Hovewer, è pericoloso uccidere gli eventi di mousedown per impostazione predefinita perché questo potrebbe probabilmente frenare la funzionalità esistente
Dan

1
Arg. È fastidioso è stato ammortizzato. C'è un sacco di tempo quando lo desideri legittimamente.
Chuck Le Butt,

Sto creando un menu contestuale con il tasto destro del mouse su del testo di ancoraggio e non voglio che il testo selezioni al clic. Quindi sì, @Monk, questo si qualificherebbe come un esempio legittimo.
Wayne Smallman,

75

Ho trovato questa risposta ( Prevenire l'evidenziazione della tabella di testo ) molto utile e forse può essere combinata con un altro modo di fornire compatibilità con IE.

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

Chrome utilizza -webkit-user-select
tim

3
Apprezza sempre il modo CSS di fare le cose invece di usare jQuery o JS in generale. Proprio come le animazioni jQuery e le transizioni CSS, il modo in cui è integrato nel browser sarà sempre il migliore e il più efficiente.
Brian Leishman,

17

Ecco una soluzione più completa per la selezione di disconnessione e la cancellazione di alcuni dei tasti di scelta rapida (come Ctrl+ ae Ctrl+ c. Test: Cmd + ae 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);

e chiama esempio:

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

jsfiddle.net/JBxnQ/

Questo potrebbe anche non essere sufficiente per le vecchie versioni di FireFox (non so dire quale). Se tutto ciò non funziona, aggiungi quanto segue:

.on('mousedown', false)

3
Perché chiami attr('unselectable', 'on')due volte? È un refuso o è utile?
KajMagnus,

Questo ha funzionato benissimo per me, ma ho dovuto disabilitare ".each (function () {$ (this) .attr ('unselectable', 'on') .bind ('selectstart', function () {return false;} );}); " sezione per la mia particolare app web (JQuery Mobile), nel caso in cui aiuti qualcuno ..
Anthony

13

Quanto segue disabiliterebbe la selezione di tutte le 'voci' di classi in tutti i browser comuni (IE, Chrome, Mozilla, Opera e Safari):

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

1
Non complicato - Eccellente! Grazie. Per disabili Ho aggiunto .attr ('disabled', 'disabled')
freewill

Aggiornamento: invece di .attr ('disabled', 'disabled'), ho usato .attr ('readonly', 'readonly'). Disabilitato impedisce di pubblicare la mia variabile di modello in MVC (la variabile di modello è nulla). Readonly ha ancora disabilitato l'aspetto (io uso bootstrap) e consente di pubblicare il valore dell'articolo
freewill

Ottimo fratello, sto usando questo codice per sostituire "pointer-events: none;", che non funziona in IE 11. saluti
Shortys Oberto Dutari,

8
        $(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");
        });

Potresti scrivere un breve riassunto della risposta oltre al codice?
jonsca,

6

Questo può essere fatto facilmente usando JavaScript Questo è applicabile a tutti i Browser

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

Chiama per questa funzione

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

Questo è fantastico! Ma come possiamo fermare il "focus" su di esso?
mutanico il

3
Questa risposta è obsoleta dal 2013
Dan,

6

Questo è in realtà molto semplice. Per disabilitare la selezione del testo (e anche fare clic + trascinamento del testo (ad esempio un collegamento in Chrome)), basta usare il seguente codice jQuery:

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

Tutto ciò fa è impedire che ciò avvenga quando si fa clic con il mouse ( mousedown()) nei tag bodye html. Puoi facilmente cambiare l'elemento semplicemente cambiando il testo tra le due virgolette (es. Cambia $('body, html')in $('#myUnselectableDiv')per rendere il myUnselectableDivdiv che sia, beh, non selezionabile.

Un breve frammento per mostrarti / dimostrarlo:

$('#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>

Si noti che questo effetto non è perfetto e offre le migliori prestazioni rendendo l'intera finestra non selezionabile. Potresti anche voler aggiungere

la cancellazione di alcuni dei tasti di scelta rapida (come Ctrl+ae Ctrl+c. Test: Cmd+a e Cmd+c)

anche, usando quella sezione della risposta di Vladimir sopra. (arriva al suo post qui )


1

Soluzione a 1 linea per CHROME:

body.style.webkitUserSelect = "none";

e FF:

body.style.MozUserSelect = "none";

IE richiede l'impostazione dell'attributo "non selezionabile" (dettagli in basso).

Ho provato questo in Chrome e funziona. Questa proprietà è ereditata, quindi impostandola sull'elemento body disabiliterai la selezione nell'intero documento.

Dettagli qui: http://help.dottoro.com/ljrlukea.php

Se stai usando Closure, chiama questa funzione:

goog.style.setUnselectable(myElement, true);

Gestisce tutti i browser in modo trasparente.

I browser non IE sono gestiti in questo modo:

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

Definito qui: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

La parte IE viene gestita in questo modo:

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

1

Penso che questo codice funzioni su tutti i browser e richieda il minimo sovraccarico. È davvero un ibrido di tutte le risposte di cui sopra. Fammi sapere se trovi un bug!

Aggiungi CSS:

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

Aggiungi jQuery:

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

Facoltativo: per disabilitare la selezione anche per tutti gli elementi figlio, è possibile modificare il blocco IE in:

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

Uso:

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

1

Ho provato tutti gli approcci, e questo è il più semplice per me perché sto usando IWebBrowser2 e non ho 10 browser con cui contendere:

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

Funziona perfettamente per me!


0

Una soluzione a questo, per i casi appropriati, è usare a <button>per il testo che non vuoi essere selezionabile. Se stai vincolando l' clickevento su un blocco di testo e non vuoi che quel testo sia selezionabile, cambiarlo in un pulsante migliorerà la semantica e impedirà anche la selezione del testo.

<button>Text Here</button>

-1

Il modo migliore e più semplice per trovarlo, impedisce ctrl + c, tasto destro. In questo caso ho bloccato tutto, quindi non devo specificare nulla.

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.