Existe-t-il un moyen de rendre le texte non sélectionnable sur une page HTML?
Je construis une interface utilisateur HTML avec des éléments de texte, tels que les noms d'onglets, qui ont une mauvaise apparence une fois sélectionnés. Malheureusement, il est très facile pour un utilisateur de double-cliquer sur un nom d'onglet, qui le sélectionne par défaut dans de nombreux navigateurs.
Je pourrais peut-être résoudre ce problème avec une astuce JavaScript (j'aimerais également voir ces réponses), mais j'espère vraiment qu'il y a quelque chose en CSS/HTML qui fonctionne directement sur tous les navigateurs.
Dans la plupart des navigateurs, ceci peut être réalisé en utilisant CSS:
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.Microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
Pour IE <10 et Opera, vous devrez utiliser l'attribut unselectable de l'élément que vous souhaitez désélectionner. Vous pouvez le définir à l'aide d'un attribut au format HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>
Malheureusement, cette propriété n’est pas héritée, ce qui signifie que vous devez insérer un attribut dans la balise de début de chaque élément du <div>. Si cela pose un problème, vous pouvez utiliser JavaScript pour le faire de manière récursive pour les descendants d'un élément:
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
[~ # ~] éditer [~ # ~]
Le code vient apparemment de http://www.dynamicdrive.com
Toutes les variations correctes de CSS sont:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Essaye ça:
<div onselectstart="return false">some stuff</div>
Simple, mais efficace… fonctionne dans les versions actuelles de tous les principaux navigateurs.
Pour Firefox, vous pouvez appliquer la déclaration CSS "-moz-user-select" à "aucune". Découvrez leur documentation, sélection de l'utilisateur.
C'est un "aperçu" de la future "sélection de l'utilisateur" comme on dit, alors peut-être que Opera ou WebKit - les navigateurs basés le prendront en charge. Je me souviens aussi d'avoir trouvé quelque chose pour Internet Explorer, mais je ne me souviens plus quoi :).
Quoi qu’il en soit, à moins que ce ne soit une situation spécifique dans laquelle la sélection de texte entraîne l’échec de certaines fonctionnalités dynamiques, vous ne devez pas modifier ce que les utilisateurs attendent d’une page Web, c’est-à-dire pouvoir sélectionner le texte de leur choix.
Je trouve un certain niveau de succès avec le CSS décrit ici http://www.quirksmode.org/css/selection.html :
::selection {
background-color: transparent;
}
Il a résolu la plupart des problèmes que je rencontrais avec certains éléments ThemeRoller ul dans une application AIR (moteur WebKit). Toujours obtenir un petit patch de néant (environ 15 x 15) qui est sélectionné, mais la moitié de la page a été sélectionnée auparavant.
Absolument positionnez les divisions sur la zone de texte avec un indice z supérieur et donnez à ces divisions un transparent GIF graphique d'arrière-plan.
Note après un peu plus de réflexion - Vous aurez besoin de relier ces 'couvertures' pour que cliquer dessus permette de vous rendre là où l'onglet était supposé, ce qui signifie que vous pouvez/devriez le faire avec l'élément d'ancrage défini sur display:box, largeur et hauteur définies ainsi que l'image d'arrière-plan transparente.
Pour Safari, -khtml-user-select: none, Tout comme le -moz-user-select De Mozilla (ou, en JavaScript, target.style.KhtmlUserSelect="none";).
Pour un exemple de pourquoi il peut être souhaitable de supprimer la sélection, voir SIMILE TImeline , qui utilise le glisser-déposer pour explorer la chronologie, au cours de laquelle un mouvement vertical accidentel de la souris provoque la surlignage inattendu des étiquettes, qui a l'air bizarre.
Voici un Sass mixin (scss) pour ceux que cela intéresse. Compass /CSS 3 ne semble pas avoir de mixin sélectionné par l'utilisateur.
// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
& {
-webkit-touch-callout: $value;
-webkit-user-select: $value;
-khtml-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
}
Bien que Compass le fasse de manière plus robuste, c’est-à-dire qu’il n’ajouterait que le support pour les fournisseurs que vous avez choisis.
"Si votre contenu est vraiment intéressant, vous ne pouvez finalement rien faire pour le protéger"
C'est vrai, mais la plupart des copies, selon mon expérience, n'ont rien à voir avec "en fin de compte", des geeks, des plagiaires déterminés ou quelque chose du genre. C’est généralement une copie occasionnelle réalisée par des personnes sans intelligence, et même une protection simple et facilement vaincue (facilement vaincue par des personnes comme nous, cela fonctionne très bien pour les arrêter. Ils ne savent rien de "voir la source" ou des caches ou quoi que ce soit d'autre ... heck, ils ne savent même pas ce qu'est un navigateur Web ou qu'ils en utilisent un.
Si cela semble mauvais, vous pouvez utiliser CSS pour changer l'apparence des sections sélectionnées.
Les images peuvent aussi être sélectionnées.
Il est limité d'utiliser JavaScript pour désélectionner du texte, car cela pourrait se produire même aux endroits où vous souhaitez les sélectionner. Pour assurer une carrière riche et réussie, évitez toutes les exigences qui nécessitent une capacité à influencer ou à gérer le navigateur au-delà de l'ordinaire ... à moins, bien sûr, qu'ils vous paient extrêmement bien.
Toute méthode JavaScript ou CSS est facilement contournée avec Firebug (comme dans le cas de Flickr).
Vous pouvez utiliser le ::selection pseudo-élément en CSS pour modifier la couleur de surbrillance.
Si les onglets sont des liens et que le n rectangle en pointillé à l'état actif est préoccupant, vous pouvez également le supprimer (envisagez la possibilité d'utilisation).
Il arrive souvent que désactiver la sélection améliore l'expérience utilisateur.
Par exemple, autoriser l'utilisateur à copier un bloc de texte sur la page sans copier le texte des éléments d'interface qui lui sont associés (qui serait intercalé dans le texte en cours de copie).
Ce qui suit fonctionne dans Firefox de manière assez intéressante si je supprime la ligne d'écriture, cela ne fonctionne pas. N'importe qui peut comprendre pourquoi la ligne d'écriture est nécessaire.
<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>