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

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

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

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

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

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)

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

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

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>

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 )

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

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

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!

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>

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