Texte non sélectionnable Javascript ne fonctionne pas dans Chrome/IE

Dans firefox semble bien, chrome et IE le texte est encore sélectionnable, y at-il un moyen de contourner cela? Le code a été pris d'une autre question, (que je ne peux pas trouver maintenant) donc il peut être périmé?Texte non sélectionnable Javascript ne fonctionne pas dans Chrome/IE

// Prevent selection 
function disableSelection(target) { 
    if (typeof target.onselectstart != "undefined") //IE route 
     target.onselectstart = function() { return false } 
    else if (typeof target.style.MozUserSelect != "undefined") //Firefox route 
     target.style.MozUserSelect = "none" 
    else //All other route (ie: Opera) 
     target.onmousedown = function() { return false } 
}

Utilisé dans le code comme:

disableSelection(document.getElementById("gBar"));

Source

2010-11-30 Tom Gullen

Pourquoi voulez-vous faire cela? Même si vous le faites fonctionner, rendre le texte sélectionnable à nouveau est aussi simple que de désactiver javascipt ou de regarder la source. La seule façon de vraiment empêcher la sélection est de servir les images à la place, ce qui provoque toutes sortes de problèmes d'accessibilité et cache le texte des moteurs de recherche. – tdammers

Je savais que quelqu'un allait poser cette question, je suis pleinement conscient de ces défauts, mais ce n'est pas pour la protection des données, c'est simplement pour améliorer les performances d'une application web, donc quand les utilisateurs font glisser/déposer des éléments, le texte contenu en eux ne commence pas à être sélectionné et fait que l'application se comporte bizarrement. –

J'ai récemment eu un problème comme celui-ci, et résolu avec une mise à jour jQuery :) – sje397

Pour webkit utilisation khtmlUserSelect au lieu de MozUserSelect.

Dans l'opéra et MSIE vous pouvez régler la unselectable-propriété sur "On"

Comme les styles les deux liés à gecko/webkit sont CSS, vous pouvez utiliser une classe pour l'appliquer:

<script type="text/javascript"> 
<!-- 
function disableSelection(target) 
{ 
    target.className='unselectable'; 
    target.setAttribute('unselectable','on'); 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
.unselectable{ 
-moz-user-select:none; 
-khtml-user-select: none; 
} 
--> 
</style>

Note: unselectable ne passera pas sur les éléments enfants, donc si vous avez autre chose que textNodes dans target, vous avez besoin de la solution de contournement que vous avez déjà là pour MSIE/opera.

Source

2010-11-30 10:07:20

Fonctionne bien, merci –

Pour les préfixes webkit webkit utiliser – Dan

Comme le style MozUserSelect dans Firefox, vous pouvez utiliser -webkit-user-select: none pour un navigateur basé sur Webkit (comme Safari et Chrome). Je pense que vous pouvez utiliser -o-user-select: none dans Opera. Mais je ne l'ai pas testé.

// Prevent selection 
function disableSelection(target) { 
    if (typeof target.onselectstart != "undefined") //IE route 
     target.onselectstart = function() { return false } 
    else if (typeof target.style.userSelect != "undefined") //Some day in the future? 
     target.style.userSelect = "none" 
    else if (typeof target.style.webkitUserSelect != "undefined") //Webkit route 
     target.style.webkitUserSelect = "none" 
    else if (typeof target.style.MozUserSelect != "undefined") //Firefox route 
     target.style.MozUserSelect = "none" 
    else //All other route (ie: Opera) 
     target.onmousedown = function() { return false } 
}

Pour IE, peut-être cela peut vous aider: http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx

Source

2010-11-30 10:09:28

Merci pour le code mais cela se comporte toujours exactement comme mon code d'origine dans les 3 navigateurs (fonctionne en FF mais pas chrome/IE) –

Désolé d'être une douleur, toujours pas de joie. Est-ce que le fait que la div soit contenue dans d'autres divs sélectionnables fait peut-être partie du problème? –

Fonctionne pour moi dans Safari et Chrome. Mais vous devriez probablement faire comme Dr.Molle a écrit. Alors mettez le style dans une classe CSS et placez-le sur la cible. –

Pour Wekbit (par exemple, Chrome et Safari), vous pouvez ajouter:

else if (typeof target.style.webkitUserSelect != "undefined") // Webkit route 
    target.style.webkitUserSelect = "none";

Pour IE, utilisez 'unselectable':

else if (typeof target.unselectable != "undefined") // IE route 
    target.unselectable = true;

Référence: http://help.dottoro.com/ljrlukea.php

Source

2010-11-30 10:15:27 sje397

Toujours le même comportement –

@Tom Gullen: juste testé ici et cela fonctionne pour Chrome: http://jsfiddle.net/sje397/Hk3tu/ – sje397

tous les exemples ci-dessus est trop compliqué .. basé sur la version du navigateur. J'ai une solution simle ... fonctionne pour tous les navigateurs!

// you can select here which html element you allow to be selected 
var ExcludeElems = ["INPUT","SELECT","OPTION"] 



function disableSelection (target) { 
    // For all browswers code will work ..... 
    target.onmousedown = function (e) 
    { 
    var i; 
    var e = e ? e : window.event; 

    if (e) 
     for (i=0; i<ExcludeElems.length;i++) 
     if (e.target.nodeName == ExcludeElems[i]) 
      return true; 
    return false; 
    }

Si vous avez besoin, vous pouvez rendre cette fonction plus compliquée. Utilisez ce code pour tout élément de conteneur ...

disableSelection (document) 
//disableSelection (document.body) 
//disableSelection (divName) ....

Source

2014-02-24 21:27:10

Texte non sélectionnable Javascript ne fonctionne pas dans Chrome/IE

Répondre

Questions connexes