Comment désactiver la sélection de texte à l'aide de jQuery?


198

JQuery ou jQuery-UI ont-ils une fonctionnalité pour désactiver la sélection de texte pour des éléments de document donnés?



@John: Le lien ci-dessus répond-il à votre question? Si ce n'est pas le cas, vous voudrez peut-être ajouter un peu plus de détails sur la façon dont votre situation est différente.
Jørn Schou-Rode

1
Oui. Mais bien que la réponse soit la même, cette question est très spécifique, de sorte que beaucoup peuvent manquer cette réponse en ayant à l'esprit une question plus générale (comme je l'ai fait).
Dawid Ohia

@Jhon: L'autre question a aussi une solution jQuery.
Omar Abid

Réponses:


274

Dans jQuery 1.8, cela peut être fait comme suit:

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

1
L'alternative JavaScript ne fonctionne que pour IE. "onselectstart" n'est pas disponible pour les autres navigateurs
Omar Abid

13
@Omar: J'en suis bien conscient.
SLaks


11
Merci pour cela. Je travaillais sur un curseur de glissement et j'avais besoin d'un moyen pour que le texte ne soit pas sélectionné dans le processus.
Spencer Ruport

35
À ceux d'entre vous qui disent «ne faites tout simplement pas» pour désactiver la sélection de texte (ou toute autre chose sur SO d'ailleurs), ouvrez un peu votre esprit. Souvent, les gens le désactivent pour des raisons esthétiques, comme éviter la sélection de texte lors d'un double-clic sur une étiquette contenant du texte, etc. Donc, répondez à la question ou fournissez un véritable point de contrée et spécifiez ce dont vous parlez de négation pas juste rayer l'idée d'une manière générale.
dudewad

102

Si vous utilisez jQuery UI, il existe une méthode pour cela, mais elle ne peut gérer que la sélection de la souris (c'est-à-dire que CTRL+ Afonctionne toujours):

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

Le code est vraiment simple, si vous ne voulez pas utiliser l'interface utilisateur 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 fonction jquery ui serait géniale, mais elle n'offre pas le même niveau de protection, elle empêche de sélectionner directement les choses, mais si vous effectuez une sélection à partir d'un autre objet dom, vous avez également besoin des règles css - voici la fonction = function () {return this.bind (($ .support.selectstart? "selectstart": "mousedown") + ".ui-disableSelection", function (event) {event.preventDefault ();}); }
chrismarx

2
Notez que disableSelection () est déconseillé dans jQuery UI 1.9
mar10

Cela peut également nécessiter que .on ('mousedown', false) fonctionne, selon votre navigateur. Cependant, il est dangereux de tuer les événements de mousedown par défaut, car cela pourrait probablement freiner les fonctionnalités existantes
Dan

1
Arg. C'est ennuyeux d'avoir été déprécié. Il y a beaucoup de temps quand vous le voulez légitimement.
Chuck Le Butt

Je crée un menu contextuel avec clic droit sur un texte d'ancrage, et je ne veux pas que le texte soit sélectionné au clic. Alors oui, @Monk, cela serait considéré comme un exemple légitime.
Wayne Smallman

75

J'ai trouvé cette réponse ( Prevent Highlight of Text Table ) la plus utile, et peut-être qu'elle peut être combinée avec une autre façon de fournir une compatibilité IE.

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

Chrome utilise -webkit-user-select
tim

3
Appréciez toujours la façon CSS de faire les choses au lieu d'utiliser jQuery ou JS en général. Tout comme les animations jQuery vs les transitions CSS, la manière intégrée dans le navigateur sera toujours la meilleure et la plus efficace.
Brian Leishman

17

Voici une solution plus complète pour la sélection de déconnexion et l'annulation de certaines touches de raccourci (telles que Ctrl+ aet Ctrl+ c. Test: Cmd + aet 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);

et appelez l'exemple:

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

jsfiddle.net/JBxnQ/

Cela pourrait également ne pas être suffisant pour les anciennes versions de FireFox (je ne peux pas dire lesquelles). Si tout cela ne fonctionne pas, ajoutez ce qui suit:

.on('mousedown', false)

3
Pourquoi appelez-vous attr('unselectable', 'on')deux fois? Est-ce une faute de frappe ou est-ce utile?
KajMagnus

Cela a très bien fonctionné pour moi, mais j'ai dû désactiver le ".each (function () {$ (this) .attr ('unselectable', 'on') .bind ('selectstart', function () {return false;} );}); " section pour mon application Web particulière (JQuery Mobile), juste au cas où cela aiderait quelqu'un ..
Anthony

13

Les éléments suivants désactiveraient la sélection de toutes les classes «élément» dans tous les navigateurs courants (IE, Chrome, Mozilla, Opera et Safari):

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

1
Pas compliqué - Excellent! Je vous remercie. Pour les handicapés J'ai ajouté .attr ('désactivé', 'désactivé')
freewill

Mise à jour: au lieu de .attr ('désactivé', 'désactivé'), j'ai utilisé .attr ('en lecture seule', 'en lecture seule'). Désactivé empêche la publication de ma variable de modèle dans MVC (la variable de modèle est nulle). En lecture seule, la recherche est toujours désactivée (j'utilise le bootstrap) et cela permet de publier la valeur de l'article
freewill

Excellent frère, j'utilise ce code pour remplacer "pointeur-événements: aucun;", qui ne fonctionne pas dans IE 11. salutations
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");
        });

Pourriez-vous écrire un bref résumé de la réponse en plus du code?
jonsca

6

Cela peut facilement être fait en utilisant JavaScript Ceci est applicable à tous les navigateurs

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

Appel à cette fonction

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

Celui-ci est super! Mais comment arrêter la "concentration" sur elle?
mutanique

3
Cette réponse n'est plus à jour en 2013
Dan

6

C'est en fait très simple. Pour désactiver la sélection de texte (et également cliquer + faire glisser le texte (par exemple un lien dans Chrome)), utilisez simplement le code jQuery suivant:

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

Tout cela empêche la valeur par défaut de se produire lorsque vous cliquez avec votre souris ( mousedown()) dans les balises bodyet html. Vous pouvez modifier très facilement l'élément en changeant le texte entre les deux guillemets (par exemple le changement $('body, html')de $('#myUnselectableDiv')faire la myUnselectableDivdiv être, eh bien, unselectable.

Un extrait rapide pour vous montrer / prouver ceci:

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

Veuillez noter que cet effet n'est pas parfait et fonctionne mieux tout en rendant la fenêtre entière non sélectionnable. Vous pouvez également ajouter

l'annulation de certaines touches d'accès rapide (telles que Ctrl+aet Ctrl+c. Test: Cmd+a et Cmd+c)

ainsi, en utilisant cette section de la réponse de Vladimir ci-dessus. (accédez à son message ici )


1

Solution 1 ligne pour CHROME:

body.style.webkitUserSelect = "none";

et FF:

body.style.MozUserSelect = "none";

IE nécessite de définir l'attribut "non sélectionnable" (détails en bas).

J'ai testé cela dans Chrome et cela fonctionne. Cette propriété est héritée, donc la définir sur l'élément body désactivera la sélection dans tout votre document.

Détails ici: http://help.dottoro.com/ljrlukea.php

Si vous utilisez Closure, appelez simplement cette fonction:

goog.style.setUnselectable(myElement, true);

Il gère tous les navigateurs de manière transparente.

Les navigateurs non IE sont traités comme ceci:

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

Défini ici: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

La partie IE est gérée comme ceci:

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

Je pense que ce code fonctionne sur tous les navigateurs et nécessite le moins de surcharge. C'est vraiment un hybride de toutes les réponses ci-dessus. Faites-moi savoir si vous trouvez un bug!

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

Ajouter jQuery:

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

Facultatif: pour désactiver également la sélection de tous les éléments enfants, vous pouvez remplacer le bloc IE par:

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

Usage:

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

1

J'ai essayé toutes les approches, et celle-ci est la plus simple pour moi car j'utilise IWebBrowser2 et je n'ai pas 10 navigateurs à gérer:

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

Fonctionne parfaitement pour moi!


0

Une solution à cela, dans les cas appropriés, consiste à utiliser un <button>pour le texte que vous ne souhaitez pas pouvoir sélectionner. Si vous liez l' clickévénement à un bloc de texte et que vous ne voulez pas que ce texte soit sélectionnable, le changer en bouton améliorera la sémantique et empêchera également le texte d'être sélectionné.

<button>Text Here</button>

-1

Le meilleur moyen et le plus simple que je l'ai trouvé, empêche ctrl + c, clic droit. Dans ce cas, j'ai tout bloqué, donc je n'ai rien à spécifier.

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.