css - react - Comment désactiver la sélection de texte en surbrillance?




react prevent text selection (20)

Ajoutez ceci au premier div dans lequel vous voulez désactiver la sélection pour le texte:

onmousedown='return false;' 
onselectstart='return false;'

Pour les ancres agissant comme des boutons (par exemple, Questions , Balises , Utilisateurs , etc. en haut de la page Dépassement de pile) ou des onglets, existe-t-il un moyen standard CSS pour désactiver l'effet de surbrillance si l'utilisateur sélectionne par inadvertance le texte?

Je me rends compte que cela pourrait être fait avec JavaScript, et un peu de google a donné l'option -moz-user-select Mozilla uniquement.

Existe-t-il un moyen conforme à la norme pour ce faire avec CSS, et si non, quelle est la "meilleure pratique"?


Bien que ce pseudo-élément fût dans les brouillons du CSS Selectors Level 3, il a été supprimé lors de la phase de recommandation du candidat, car il est apparu que son comportement était sous-spécifié, en particulier avec les éléments imbriqués, et que l'interopérabilité n'avait pas été réalisée.

Nous en discutons dans How :: selection fonctionne sur des éléments imbriqués .

Bien qu'il soit implémenté dans le navigateur, vous pouvez créer une illusion de texte non sélectionné en utilisant la même couleur et la même couleur d'arrière-plan pour la sélection que pour la conception de l'onglet (dans votre cas).

Conception CSS normale

p { color: white;  background: black; }

Sur sélection

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Refuser aux utilisateurs de sélectionner le texte soulèvera des problèmes d’utilisabilité.


Cela fonctionne dans certains navigateurs:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

Ajoutez simplement vos éléments / identifiants souhaités devant les sélecteurs séparés par des virgules sans espaces, comme ceci:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

Les autres réponses sont meilleures. cela devrait probablement être considéré comme un dernier recours / fourre-tout.


Cela sera utile si la sélection de couleur n'est pas nécessaire

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... toutes les autres corrections de navigateur. Cela fonctionnera dans Internet Explorer 9 ou une version ultérieure.


Dans les solutions ci-dessus, la sélection est arrêtée, mais l'utilisateur pense toujours que vous pouvez sélectionner du texte car le curseur change toujours. Pour le garder statique, vous devrez définir votre curseur CSS:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Cela rendra votre texte totalement plat, comme dans une application de bureau.


J'ai appris du site Web CSS-Tricks .

user-select: none;

Et cela aussi:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

Jusqu'à ce que la propriété de user-select CSS 3 soit disponible, les navigateurs basés sur Gecko prennent en charge la propriété -moz-user-select vous avez déjà trouvée. WebKit navigateurs WebKit et Blink prennent en charge la propriété -webkit-user-select .

Ceci n'est bien sûr pas pris en charge par les navigateurs qui n'utilisent pas le moteur de rendu Gecko.

Il n’existe pas de moyen rapide et facile, conforme aux normes, de le faire; utiliser JavaScript est une option.

La vraie question est la suivante: pourquoi voulez-vous que les utilisateurs ne puissent pas mettre en évidence et probablement copier et coller certains éléments? Je ne suis pas tombé sur une seule fois pour ne pas laisser les utilisateurs mettre en évidence une certaine partie de mon site Web. Plusieurs de mes amis, après avoir passé de nombreuses heures à lire et à écrire du code, utiliseront la fonction de surbrillance comme moyen de se souvenir de l'endroit où ils se trouvaient ou fourniront un marqueur pour que leurs yeux sachent où regarder ensuite.

Le seul endroit où cela pourrait être utile, c’est si vous avez des boutons pour les formulaires qui ne doivent pas être copiés et collés si un utilisateur copié et collé le site Web.


Mis à part la propriété Mozilla-only, non, il n'y a aucun moyen de désactiver la sélection de texte avec uniquement du CSS standard (pour le moment).

Si vous remarquez que ne désactive pas la sélection de texte pour leurs boutons de navigation, je vous déconseille de le faire dans la plupart des cas, car cela modifie le comportement de sélection normal et le rend en conflit avec les attentes de l'utilisateur.


Pour ceux qui ont des difficultés à obtenir la même chose dans le navigateur Android avec l'événement tactile, utilisez:

html,body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

Pour obtenir le résultat dont j'avais besoin, il fallait utiliser à la fois ::selection et user-select

input.no-select:focus { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

input.no-select::selection { 
    background: transparent; 
}

input.no-select::-moz-selection { 
    background: transparent; 
}

Si vous utilisez Less et Bootstrap vous pouvez écrire:

.user-select(none);

Solution de contournement pour WebKit :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);

Je l'ai trouvé dans un exemple CardFlip.


Une solution JavaScript pour IE est

onselectstart="return false;"

Vérifier ma solution sans JavaScript:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

Menu contextuel avec ma technique appliquée: http://jsfiddle.net/y4Lac/2/


Vous pouvez utiliser CSS ou JavaScript pour cela. JavaScript est également supporté par les anciens navigateurs comme les anciens IE, mais si ce n’est pas votre cas, utilisez CSS:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>


MISE À JOUR Janvier 2017:

Selon Puis-je utiliser , la user-select l' user-select est actuellement prise en charge par tous les navigateurs, à l'exception d'Internet Explorer 9 et des versions antérieures (mais a malheureusement toujours besoin d'un préfixe de fournisseur).

Toutes les variations CSS correctes sont:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Notez qu'il s'agit d'une fonctionnalité non standard (c'est-à-dire qu'elle ne fait pas partie d'une spécification). Son fonctionnement n’est pas garanti partout et il peut y avoir des différences de mise en œuvre entre les navigateurs et, à l’avenir, les navigateurs peuvent abandonner toute prise en charge.

Vous trouverez plus d'informations dans la documentation de Mozilla Developer Network .


REMARQUE:

La bonne réponse est correcte car elle vous empêche de sélectionner le texte. Cependant, cela ne vous empêche pas de pouvoir copier le texte, comme je le montrerai avec les quelques captures d'écran suivantes (à partir du 7 novembre 2014).

Comme vous pouvez le constater, nous n’avons pas pu sélectionner les numéros, mais nous avons pu les copier.

Testé sur: Ubuntu , Google Chrome 38.0.2125.111.


Travail

CSS:

 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;
 -webkit-touch-callout: none;
 -webkit-user-select: none;

Cela devrait fonctionner, mais cela ne fonctionnera pas pour les anciens navigateurs. Il y a un problème de compatibilité du navigateur.


.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Ce n'est pas la meilleure façon, cependant.


-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
-webkit-user-select:none;
-moz-user-select:none;
onselectstart="return false;"
::selection { background: transparent; }
::-moz-selection { background: transparent; }

* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}

p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
<div class="draggable"></div>
.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }
if ($.browser.msie) $('.draggable').find(':not(input)').attr('unselectable', 'on');






textselection