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 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.

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 .

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 ou .

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!