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...

206
demandé sur Community 2010-09-23 18:39:06

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>
269
répondu Jerome 2015-06-01 17:08:43

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 .

232
répondu Blowsie 2017-07-25 12:24:39

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;
25
répondu Nyxynyx 2011-12-21 23:33:31

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.

7
répondu James Sumners 2016-06-27 12:17:17

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:)

4
répondu Kyle 2010-09-23 14:48:38