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

Question

Possible en double:
CSS rule to disable text selection highlighting

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

J'ai en effet un bouton "suivant", qui est un lien simple avec un écouteur 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 de texte complète. 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 flash et son haut niveau de configuration sur textfields ...

Answer 1

<div 
style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
unselectable="on" 
onselectstart="return false;" 
onmousedown="return false;"> 
    Blabla 
</div> 

Answer 2

Je ne sais pas si vous pouvez le désactiver, mais vous pouvez changer les couleurs de celui-ci :)

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

correspondre les couleurs Ensuite, il suffit à votre conception de « Darky » et voir ce qui se passe :)

Answer 3

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 à savon: Vous ne devriez vraiment pas vous tromper 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 dans le document. Peu importe si vous n'aime pas la couleur de surbrillance, parce que vous ne sont pas celui qui regarde le document.

Answer 4

Essayez ce code CSS pour la compatibilité entre les navigateurs.

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

Answer 5

MISE À JOUR Janvier 2017:

Selon Can I use, le user-select est actuellement pris en charge dans tous les navigateurs sauf Internet   Explorer 9 et les versions antérieures (mais malheureusement encore a besoin d'un préfixe 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 que c'est une fonction non standard (c.-à-pas une partie de spécification) . Il n'est pas garanti de fonctionner partout, et il peut y avoir des différences dans la mise en œuvre parmi les navigateurs et dans le futur les navigateurs peuvent abandonner le support pour cela.Les informations peuvent être trouvées dans Mozilla Developer Network documentation.