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

Question

Est-ce que jQuery ou jQuery-UI ont des fonctionnalités pour désactiver la sélection de texte pour des éléments de document donnés?

Answer 1

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

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

Answer 2

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 + A fonctionne 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; });
 

Answer 3

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

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

Answer 4

Voici une solution plus complète pour le débrancher de la sélection et de l'annulation de certaines des touches de raccourci (comme Ctrl+a et Ctrl+c. Test: Cmd+un et 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 appel exemple:

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

jsfiddle.net/JBxnQ/

Cela pourrait être aussi pas assez pour d'anciennes versions de FireFox (je ne peux pas dire lequel). Si tout cela ne fonctionne pas, ajouter ce qui suit:

.on('mousedown', false)

Answer 5

Ce qui suit désactiverait la sélection de toutes les classes 'item' dans tous les navigateurs courants (IE, Chrome, Mozilla, Opera et Safari):

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