Maison  >  Article  >  interface Web  >  Exemple de code pour désactiver le texte sélectionné via les règles CSS

Exemple de code pour désactiver le texte sélectionné via les règles CSS

黄舟
黄舟original
2017-04-18 09:44:171622parcourir

La désactivation de la sélection de texte est toujours nécessaire dans certains scénarios, par exemple si vous ne souhaitez pas que d'autres copient vos articles. Pour le moment, nous pouvons résoudre ce problème en utilisant CSS+JS. De plus, il convient de souligner ici que la sélection par l'utilisateur n'est pas encore une norme officielle du W3C et que chaque navigateur fournit une prise en charge sous la forme d'attributs privés.

Syntaxe

Formal syntax: none | text | all | element

Le code est le suivant :

(-prefix-)user-select: none;
(-prefix-)user-select: text;
(-prefix-)user-select: all;
(-prefix-)user-select: element;

Le code est le suivant :

.row-of-icons {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */</p> <p> /* No support for these yet,use at own risk */
-o-user-select: none;
user-select: none;
}

Compatibilité IE

Actuellement, la règle -ms-user-select peut être utilisée dans les navigateurs d'IE 10 et supérieur, mais dans les versions antérieures d'IE, nous ne pouvons désactiver la sélection que via javascript. Texte :

Le code est le suivant :

$(el).attr(&#39;unselectable&#39;,&#39;on&#39;)
.css({&#39;-moz-user-select&#39;:&#39;-moz-none&#39;,
&#39;-moz-user-select&#39;:&#39;none&#39;,
&#39;-o-user-select&#39;:&#39;none&#39;,
&#39;-khtml-user-select&#39;:&#39;none&#39;, /* you could also put this in a class */
&#39;-webkit-user-select&#39;:&#39;none&#39;,/* and add the CSS class here instead */
&#39;-ms-user-select&#39;:&#39;none&#39;,
&#39;user-select&#39;:&#39;none&#39;
}).bind(&#39;selectstart&#39;, function(){
return false;
});


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn