Comment désactiver la sélection de texte avec CSS ou JavaScript? [dupliquer]
possibilité de dupliquer:
règle de la CSS pour désactiver la sélection de texte mettant en évidence
je crée une galerie HTML/CSS/jQuery, avec plusieurs pages.
j'ai en effet un bouton" next", qui est un lien simple avec un jQuery click listener.
Le problème est que si l'utilisateur clique sur le bouton à plusieurs reprises, le texte de la le bouton est sélectionné, puis la ligne complète du texte. Dans mon design vraiment sombre, c'est vraiment laid et absurde.
alors voici ma question: Pouvez-vous désactiver la sélection de texte sur HTML? Sinon, flash et son haut niveau de configuration sur textfields me manqueront terriblement...
5 réponses
<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>
mise à jour janvier 2017:
selon puis-je utiliser , le user-select est actuellement pris en charge dans tous les navigateurs sauf Internet Explorer 9 et versions précédentes (mais malheureusement encore nécessite un préfixe vendeur).
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 caractéristique non standard (c.-à-d. qui ne fait pas partie d'une spécification). Il n'est pas garanti de fonctionner partout, et il pourrait y avoir des différences dans la mise en œuvre entre les navigateurs et dans les navigateurs futurs peuvent laisser tomber le soutien pour elle.
plus d'informations peuvent être trouvées dans Mozilla Developer Network documentation .
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 à Savon: Tu ne devrais vraiment pas te moquer de l'agent utilisateur du client de cette façon. Si le client veut sélectionner des choses sur le document, alors il devrait pouvoir sélectionner des choses sur le document. Il n'a pas d'importance si vous n'aimez pas la couleur de surbrillance, parce que vous ne sont pas celui qui regarde le document.
Je ne suis pas sûr que vous puissiez l'éteindre, mais vous pouvez en changer les couleurs:)
myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
background:#000;
color:#fff;
}
puis il suffit de faire correspondre les couleurs à votre" darky "conception et de voir ce qui se passe:)