Comment empêcher la sélection et la copie de texte à l'aide de CSS ? (exemple de code)

Dans le développement front-end, il y aura parfois une situation comme celle-ci : après avoir double-cliqué sur le texte, le texte sera sélectionné, ce qui est très moche, pas beau du tout, et très gênant et parfois sur certains sites Web ; pages, nous avons juste besoin que le texte ne puisse pas être sélectionné ou copié.

Alors, comment réaliser cette exigence et empêcher que le texte soit sélectionné ou copié ? Cet article vous présentera la méthode CSS pour empêcher la sélection et la copie de texte. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

La méthode CSS pour interdire la sélection et la copie de texte est en fait très simple. Nous pouvons utiliser l'attribut user-select pour la compléter. Jetons un coup d'oeil à cette propriété.

L'attribut user-select est un nouvel attribut dans CSS3. Il peut être utilisé pour contrôler la sélection du contenu, définir ou récupérer si les utilisateurs sont autorisés à sélectionner du texte et s'applique à tous les éléments à l'exception des éléments de remplacement.

Syntaxe de base :

user-select:value;

Vous pouvez définir les valeurs d'attribut suivantes :

auto : Par défaut value , le texte sera sélectionné en fonction des attributs par défaut du navigateur ;

aucun : peut configurer l'utilisateur pour qu'il ne puisse sélectionner aucun contenu dans l'élément

texte : Définissez l'utilisateur pour qu'il puisse sélectionner le texte dans l'élément ;

élément : Définissez le texte pour qu'il soit sélectionnable, mais la plage de sélection est limitée par la limite de l'élément (cette valeur d'attribut n'est prise en charge que par IE et FF)

all : peut être sélectionné lorsque tout le contenu est dans son ensemble. Si un double-clic ou un clic contextuel se produit sur un élément enfant, l'élément ancêtre le plus élevé remontant à cet élément enfant sera sélectionné. Pour faire simple : l'élément cible sera sélectionné dans son ensemble, pas seulement une partie. Le navigateur sélectionnera automatiquement le contenu dans l'ensemble de l'élément.

-moz-none : valeur de l'attribut privé Firefox, la définition du texte des éléments et des sous-éléments ne sera pas facultative, cependant, les sous-éléments peuvent être réinitialisés comme facultatifs via le texte ;

Prise en charge du navigateur

L'image ci-dessus indique quand la valeur de l'attribut de sélection de l'utilisateur est none|text|all Le degré de prise en charge de chaque navigateur dans ce cas ; lorsque la valeur de l'attribut est element, la plupart des navigateurs ne la prennent pas en charge, elle n'est donc pas répertoriée.

Ce qui suit est un exemple de code simple pour présenter la méthode de attribut CSS user-select pour interdire la sélection et la copie de texte, compte tenu de la compatibilité.

Désactiver la sélection du texte Copier l'exemple de code :

code css :

.box{   
 -webkit-user-select: none;   
  -moz-user-select: none;    
  -ms-user-select: none;    
  user-select: none;
}

code html :

<div class="box" onselectstart="return false;" unselectable="on">
    这是测试文字，选择试试，你会发现怎么也选不中，无法复制，哈哈哈哈！
</div>

Remarque :

Comme IE6-9 ne prend pas en charge l'attribut user-select, je souhaite implémenter user-select:none, c'est-à-dire interdire le texte de être sélectionné et copié L'effet peut être obtenu en utilisant l'attribut label onselectstart="return false;";

Résumé : Ce qui précède est tout le contenu de l'implémentation CSS introduite dans cet article pour interdire la sélection et la copie de texte. Vous pouvez l'essayer vous-même pour approfondir votre compréhension de l'utilisateur. sélectionnez l'attribut. J'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de didacticiels connexes, veuillez visiter : Tutoriel vidéo CSS, Tutoriel vidéo HTML, Tutoriel vidéo bootstrap !

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!