Comment interdire la copie du contenu d'un article en CSS

青灯夜游
Libérer: 2022-08-12 18:22:31
original
3516 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut user-select pour obtenir l'effet d'interdire la copie du contenu de l'article. Ajoutez simplement le style "user-select:none;" à l'élément de texte. L'attribut user-select est utilisé pour définir ou récupérer si l'utilisateur est autorisé à sélectionner du texte. Lorsque la valeur de cet attribut est définie sur "aucun", l'élément de texte ne peut pas être sélectionné par la souris, empêchant ainsi la copie du texte.

Comment interdire la copie du contenu d'un article en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Généralement, le texte copiable sur une page Web aura le curseur I suivantI 状光标

Comment interdire la copie du contenu dun article en CSS

如果不想让复制文本,通过设置CSS 的 user-select就可以达到目的。

user-select属性设置或检索是否允许用户选中文本。user-select的默认值是 text,可以选择文本。

在 web 浏览器中,如果您在文本上双击,文本会被选取或高亮显示。此属性用于阻止这种行为。

语法:

user-select: auto|none|text|all;
Copier après la connexion
描述
auto默认。如果浏览器允许,则可以选择文本。
none防止文本选取。
text文本可被用户选取。
all单击选取文本,而不是双击。

只需要给文本元素添加“user-select:none;

Comment interdire la copie du contenu dun article en CSS

Si vous ne souhaitez pas copier de texte, vous pouvez atteindre l'objectif en définissant la sélection de l'utilisateur CSS.

L'attribut de sélection de l'utilisateur définit ou récupère si l'utilisateur est autorisé à sélectionner du texte. La valeur par défaut de user-select est text, qui peut sélectionner du texte.


Dans un navigateur Web, si vous double-cliquez sur le texte, le texte sera sélectionné ou mis en surbrillance. Cette propriété est utilisée pour empêcher ce comportement.

Comment interdire la copie du contenu dun article en CSS

Syntaxe :

-moz-user-select:none; /* Firefox私有属性 */

-webkit-user-select:none; /* WebKit内核私有属性 */

-ms-user-select:none; /* IE私有属性(IE10及以后) */

-khtml-user-select:none; /* KHTML内核私有属性 */

-o-user-select:none; /* Opera私有属性 */

user-select:none; /* CSS3属性 */
Copier après la connexion
ValeurDescription
autoPar défaut. Le texte peut être sélectionné si le navigateur le permet.
aucunEmpêcher la sélection de texte.
texteLe texte peut être sélectionné par l'utilisateur.
tousCliquez pour sélectionner le texte au lieu de double-cliquer.
Ajoutez simplement le style "user-select:none;" à l'élément de texte afin que l'élément de texte ne puisse pas être sélectionné par le souris. Obtenez l’effet d’interdire la copie de texte.

Étant donné que l'attribut user-select est une nouvelle fonctionnalité de la spécification CSS3, il présente des problèmes de compatibilité, il doit donc être préfixé pour différents navigateurs.

Comment interdire la copie du contenu dun article en CSSComment interdire la copie de texte :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
.test{
padding:10px;
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
background:#eee;}
</style>
</head>
<body>
<div onselectstart="return false;" unselectable="on">选择我试试,你会发现怎么也选择不到我,哈哈哈哈</div>
</body>
</html>
Copier après la connexion

Effet (maintenant ce curseur fléché) :

🎜🎜🎜🎜Exemple : interdire la sélection de texte pour implémenter la fonction d'interdiction de copie de texte🎜🎜rrreee🎜🎜🎜🎜 ( vidéo d'apprentissage Partager : 🎜tutoriel vidéo CSS🎜)🎜

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