Y a-t-il un moyen de rendre le texte non sélectionnable dans une page html ?

Question

Je construis un html interface utilisateur avec des éléments de texte, telles que les noms d’onglet, qui semble mal lorsque sélectionné. Malheureusement, il est très facile pour un utilisateur de double-cliquer sur un nom d’onglet, qui la sélectionne par défaut dans de nombreux navigateurs.

Je pourrais être capable de résoudre ce problème avec une astuce javascript (je voudrais voir ces réponses, trop)--mais j’espère vraiment qu'il y a quelque chose en css/html directement qui fonctionne dans tous les navigateurs.

Answer 1

Dans la plupart des navigateurs, ce qui peut être réalisé à l'aide de CSS:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Pour IE < 10 et Opera, vous aurez besoin d'utiliser l' unselectable attribut de l'élément que vous souhaitez être ne peut pas être sélectionnée. Vous pouvez le régler à l'aide d'un attribut dans le HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Malheureusement, cette propriété n'est pas héréditaire, ce qui signifie que vous devez mettre un attribut dans la balise de début de chaque élément à l'intérieur de l' <div>. Si c'est un problème, vous pouvez utiliser JavaScript pour faire cela de façon récursive pour un élément descendants:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Answer 2

<pre><code></code><p><strong>EDIT</strong></p><p><a href="http://www.dynamicdrive.com">http://www.dynamicdrive.com</a></p></pre>

Answer 3

Personne ici et posté une réponse avec toutes les variantes de css correct, donc voilà :

Answer 4

Essayez ceci :

Simple, mais efficace... travaille dans les versions actuelles de tous les principaux navigateurs.

Answer 5

Pour firefox, vous pouvez appliquer le CSS déclaration "-moz-user-select" sur "aucun" Découvrez leurs docs: http://developer.mozilla.org/En/CSS/-moz-user-select

C'est un "aperçu" de l'avenir de "l'utilisateur-sélectionnez" comme ils disent, donc peut-être à l'opéra ou basé sur webkit et des navigateurs. Je me souviens aussi de trouver quelque chose pour IE, mais ne me souviens pas de quoi :).

De toute façon, à moins d'une situation particulière où le texte-sélectionner rend certaines fonctionnalités dynamiques échouent, vous ne devriez pas vraiment ignorer ce que les utilisateurs attendent d'un site web, et qui est en mesure de sélectionner n'importe quel texte qu'ils veulent.