Comment désactiver la sélection de texte en utilisant jQuery?

si vous utilisez jQuery UI, Il ya une méthode pour cela, mais il ne peut gérer la sélection de la souris (i.e. Ctrl + A fonctionne toujours):

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

le code est très simple, si vous ne voulez pas utiliser 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; });

j'ai trouvé cette réponse ( empêcher le surlignage de la Table de texte ) très utile, et peut-être peut-elle être combinée 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;
}

Voici une solution plus complète à la sélection de déconnexion, et l'annulation de certaines des touches chaudes (telles que Ctrl + a et Ctrl + c . essai: Cmd + a 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 exemple d'appel:

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

jsfiddle.net/JBxnQ/

cela pourrait aussi ne pas être suffisant pour les anciennes versions de FireFox (Je ne peux pas dire lequel). Si tout cela ne fonctionne pas, ajouter ce qui suit:

.on('mousedown', false)

le texte suivant désactiverait la sélection de tous les "éléments" de classe dans tous les navigateurs courants (i.e., 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 aussi cliquer+faire glisser le texte(E. g un lien dans Chrome)), il suffit d'utiliser le code jQuery suivant:

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

tout ce que cela fait est d'empêcher le défaut de se produire lorsque vous cliquez avec votre souris ( mousedown() ) dans les étiquettes body et html . Vous pouvez très facilement changer l'élément simplement en changeant le texte entre les deux guillemets (E. g remplacer $('body, html') par $('#myUnselectableDiv') myUnselectableDiv div être, ainsi, ne peut pas être sélectionnée.

un petit coup 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>

s'il vous plaît noter que cet effet n'est pas parfait, et exécute le meilleur tout en faisant la fenêtre entière non sélectionnable. Vous pouvez aussi ajouter

l'annulation de certaines touches chaudes (telles que Ctrl+a et Ctrl+c . essai: Cmd+a et Cmd+c )

aussi, en utilisant cette section de la réponse de Vladimir ci-dessus. (se rendre à son poste ici )

1 solution de ligne pour CHROME:

body.style.webkitUserSelect = "none";

et FF:

body.style.MozUserSelect = "none";

IE nécessite la définition de la "unselectable" attribut (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 l'ensemble de 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 manipulé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 frais généraux. C'est vraiment un hybride de toutes les réponses ci-dessus. Laissez-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);

optionnel: pour désactiver la sélection pour tous les éléments enfants ainsi, vous pouvez changer le bloc IE en:

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

Utilisation:

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

une solution à cela, pour les cas appropriés, est d'utiliser un <button> pour le texte que vous ne voulez pas être sélectionnable. Si vous êtes lié à l'événement click sur un bloc de texte, et que vous ne voulez pas que ce texte soit sélectionnable, le changer pour être un bouton améliorera la sémantique et empêchera également le texte d'être sélectionné.

<button>Text Here</button>

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

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

Fonctionne parfaitement pour moi!

la meilleure et la plus simple façon que je l'ai trouvé, empêche ctrl + c, clic droit. Dans ce cas, j'ai tout Bloqué, donc je n'ai pas à préciser quoi que ce soit.

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