web-dev-qa-db-fra.com

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

Duplicate possible:
règle CSS permettant de 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 toute la ligne de texte. Dans mon design vraiment sombre, c'est vraiment moche et absurde.

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

htmlcsscross-browsertextselection
239
daviddarx
<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>
295
Jerome

MISE À JOUR Janvier 2017:

Selon Puis-je utiliser , le user-select est actuellement pris en charge par tous les navigateurs, à l'exception d'Internet Explorer 9 et des versions antérieures (mais malheureusement nécessite toujours un préfixe du vendeur).

Toutes les variations correctes de CSS 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 quelconque). Son fonctionnement n’est pas garanti partout et il peut exister des différences de mise en œuvre entre les navigateurs et, à l’avenir, les navigateurs peuvent abandonner la prise en charge.

Plus d'informations peuvent être trouvées dans documentation de Mozilla Developer Network .

264
Blowsie

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;
29
Nyxynyx

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 visser avec l'agent utilisateur du client de cette manière. Si le client souhaite sélectionner des éléments sur le document, il devrait pouvoir le faire. Peu importe si vous n'aimez pas la couleur de surbrillance, car vous n'êtes pas celui qui visualise le document.

7
James Sumners

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, associez simplement les couleurs à votre motif "sombre" et voyez ce qui se passe :)

5
Kyle