Maison >interface Web >tutoriel CSS >Comment définir la zone de saisie pour qu'elle ne soit pas modifiable en CSS

Comment définir la zone de saisie pour qu'elle ne soit pas modifiable en CSS

藏色散人
藏色散人original
2021-02-02 10:07:085119parcourir

Comment définir la zone de saisie pour qu'elle ne soit pas modifiable avec CSS : créez d'abord un exemple de fichier HTML ; puis définissez une balise d'entrée ; puis ajoutez le style CSS "pointer-events: none;" à l'entrée.

Comment définir la zone de saisie pour qu'elle ne soit pas modifiable en CSS

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

css rend l'entrée non modifiable

Ajoutez un style CSS aux événements de pointeur d'entrée : aucun ; puis

input{
    pointer-events: none;
}

utilisez des événements de pointeur pour empêcher qu'un élément soit la cible d'un événement de souris ne signifie pas nécessairement que l'écouteur d'événement sur l'élément ne se déclenchera jamais. Si un descendant d'élément spécifie explicitement l'attribut pointer-events et lui permet d'être la cible des événements de souris, alors tous les événements pointés vers cet élément se propageront à travers l'élément parent pendant la propagation des événements et déclencheront les écouteurs d'événements de la manière appropriée. . Bien entendu, l'activité de la souris sur l'écran qui se trouve sur l'élément parent mais pas sur l'élément descendant ne sera pas capturée par l'élément parent et l'élément descendant (passera par l'élément parent et pointera vers l'élément situé en dessous).

Rendre l'entrée non modifiable en HTML

1. Ajoutez l'attribut désactivé à la balise d'entrée

L'attribut désactivé stipule que l'élément d'entrée doit être désactivé. Les éléments d'entrée désactivés ne peuvent pas être. La copie est modifiée ou désactivée, ne peut pas être sélectionnée, ne peut pas recevoir le focus et la valeur ne sera pas reçue en arrière-plan. Après réglage, la couleur du texte deviendra grise. L'attribut désactivé ne peut pas être utilisé avec 10a0c4c6fe334f1dd2642c4aa224944a.

Exemple :

<input type="text" disabled="disabled" />

2. Ajoutez l'attribut readonly à la balise d'entrée

L'attribut readonly précise que le champ de saisie est en lecture seule et copiable. peut utiliser la touche Tab pour basculer vers ce champ. Un champ est sélectionnable, peut recevoir le focus et son texte peut être sélectionné ou copié. La valeur transmise sera reçue en arrière-plan. L'attribut readonly empêche les utilisateurs de modifier la valeur.

L'attribut readonly peut être utilisé avec 23efcc05e98690ceeb219581933e4231 ou 794332e4da1b97221ff0ba8bc66903c4.

Exemple :

<input type="text" readonly="readonly">

Recommandé : "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!

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