Comment désactiver la sélection de texte avec CSS ou JavaScript?

Duplication possible:
Règle CSS pour désactiver la sélection de texte en surbrillance

Je fais une galerie HTML / CSS / jQuery, avec plusieurs pages.

J’ai en effet un bouton “suivant”, qui est un simple lien avec un écouteur de clics jQuery.

Le problème est que si l’utilisateur clique plusieurs fois sur le bouton, le texte du bouton est sélectionné, puis la ligne complète du texte. Dans mon design vraiment sombre, c’est vraiment moche et absurde.

Alors voici ma question: pouvez-vous désactiver la sélection de texte sur HTML? Sinon, je vais terriblement manquer de flash et de son haut niveau de configuration sur les champs de texte …

Blabla

MISE À JOUR Janvier 2017:

Selon Can I use , la user-select l’ user-select est actuellement prise en charge dans tous les navigateurs, à l’exception d’Internet Explorer 9 et des versions antérieures (mais nécessite malheureusement encore un préfixe de fournisseur).


Toutes les variations CSS correctes sont les suivantes:

 .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 */ } 
 

Selectable text.

Unselectable text.

Essayez ce code CSS pour la compatibilité entre navigateurs.

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

Vous pouvez utiliser JavaScript pour faire ce que vous voulez:

 if (document.addEventListener !== undefined) { // Not IE document.addEventListener('click', checkSelection, false); } else { // IE document.attachEvent('onclick', checkSelection); } function checkSelection() { var sel = {}; if (window.getSelection) { // Mozilla sel = window.getSelection(); } else if (document.selection) { // IE sel = document.selection.createRange(); } // Mozilla if (sel.rangeCount) { sel.removeAllRanges(); return; } // IE if (sel.text > '') { document.selection.empty(); return; } } 

Boîte à soap: Vous ne devriez vraiment pas avoir à faire avec l’agent utilisateur du client de cette manière. Si le client souhaite sélectionner des éléments sur le document, il doit pouvoir sélectionner des éléments sur le document. Ce n’est pas grave si vous n’aimez pas la couleur de mise en évidence, car ce n’est pas vous qui visualisez le document.

Je ne sais pas si vous pouvez l’éteindre, mais vous pouvez en changer les couleurs 🙂

 myDiv::selection, myDiv::-moz-selection, myDiv::-webkit-selection { background:#000; color:#fff; } 

Ensuite, il suffit de faire correspondre les couleurs à votre design “sombre” et de voir ce qui se passe 🙂