Existe-t-il un moyen de rendre le texte non sélectionnable sur une page HTML? [dupliquer]
https://stackoverflow.com/questions/69430
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Cette question a déjà une réponse ici:
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 que quelque chose en CSS / HTML fonctionne directement sur tous les navigateurs.
La solution
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 être non sélectionnable. Vous pouvez définir ceci en utilisant 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 de la <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"));
Autres conseils
<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>
MODIFIER
Le code provient apparemment de http://www.dynamicdrive.com
Toutes les variations CSS correctes sont:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Essayez ceci:
<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 " à " aucun " ;. Consultez leur documentation, à la sélection de l'utilisateur .
C'est un " aperçu! " du futur " sélection de l'utilisateur " comme on dit, alors peut-être Opera ou Les navigateurs WebKit prendront cela en charge. Je me souviens aussi d’avoir trouvé quelque chose pour Internet & Nbsp; 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 vraiment annuler ce que les utilisateurs attendent d’une page Web, c’est-à-dire pouvoir sélectionner le texte de leur choix.
Je trouve un certain 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 de 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.
Positionnez les divs sur la zone de texte avec un indice z supérieur et donnez-leur un transparent GIF fond graphique.
Remarque après un peu plus de réflexion - Vous aurez besoin de relier ces 'couvertures' pour pouvoir cliquer dessus, cela vous mènerait à l'endroit où l'onglet était supposé, ce qui signifie que vous pourriez / devriez le faire avec le jeu d'éléments d'ancrage sur display:box, la largeur et la hauteur définies ainsi que l'image d'arrière-plan transparente.
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 mise en surbrillance inattendue des étiquettes, ce qui semble étrange.
Pour Safari, -khtml-user-select: none, comme le -moz-user-select de Mozilla (ou, en JavaScript, target.style.KhtmlUserSelect="none";).
& "; Si votre contenu est vraiment intéressant, il y a peu de choses que vous puissiez faire finalement 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 &"; ou des geeks ou des plagiaires déterminés ou quelque chose comme ça. 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 autre chose ... Zut, ils ne savent même pas ce qu'est un navigateur web ou s'ils en utilisent un.
Voici un Sass mixin (scss) pour les personnes intéressées. Compass / CSS & nbsp; 3 ne semble pas disposer d'un mixeur à la sélection de 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;
}
}
Même si Compass le ferait de manière plus robuste, c’est-à-dire qu’il n’ajouterait que le support pour les fournisseurs que vous avez choisis.
Si le résultat est mauvais, vous pouvez utiliser CSS pour modifier l'apparence des sections sélectionnées.
Toute méthode JavaScript ou CSS est facilement contournée avec Firebug (comme dans le cas de Flickr).
Vous pouvez utiliser le ::selection le pseudo-élément dans CSS pour modifier le surligner la couleur.
Si les onglets sont des liens et le Le rectangle en pointillé dans l'état actif est un sujet de préoccupation, vous pouvez également le supprimer (envisagez la facilité d'utilisation, bien sûr).
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).
Les images peuvent également être sélectionnées.
L'utilisation de JavaScript pour désélectionner du texte est limitée, car cela pourrait se produire même aux endroits où vous souhaitez les sélectionner. Pour que votre carrière soit riche et réussie, évitez toutes les exigences qui nécessitent une capacité à influencer ou à gérer votre navigateur Web au-delà de l'ordinaire ... à moins, bien sûr, qu'ils vous paient extrêmement bien.
Ce qui suit fonctionne dans Firefox de manière assez intéressante si je supprime la ligne d’écriture, cela ne fonctionne pas. Tout le monde comprend pourquoi la ligne d'écriture est nécessaire.
<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
