Maison > interface Web > tutoriel CSS > le corps du texte

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

黄舟
Libérer: 2017-04-18 09:44:17
original
1629 Les gens l'ont consulté

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
Copier après la connexion

Le code est le suivant :

(-prefix-)user-select: none;
(-prefix-)user-select: text;
(-prefix-)user-select: all;
(-prefix-)user-select: element;
Copier après la connexion

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;
}
Copier après la connexion

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;
});
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal