Comment implémenter l'entrée CSS en lecture seule

Dans notre conception Web, nous utilisons souvent l'élément de saisie pour implémenter la fonction de la zone de saisie. Mais dans certains cas, nous ne souhaitons pas que les utilisateurs puissent modifier le contenu de ces zones de saisie, par exemple en affichant des informations textuelles en lecture seule. À l'heure actuelle, nous pouvons utiliser l'attribut readonly readonly de l'élément d'entrée pour répondre à cette exigence.

L'attribut readonly de l'élément input est utilisé pour définir la zone de saisie en lecture seule, c'est-à-dire que l'utilisateur peut afficher le contenu dans la zone de saisie, mais ne peut pas modifier ou supprimer le contenu. Ceci est très utile pour les scénarios dans lesquels certaines informations doivent être affichées à l'utilisateur, telles que les numéros de commande, les descriptions de produits, etc.

En CSS, nous pouvons utiliser les attributs suivants pour définir l'état en lecture seule de l'élément d'entrée :

1. readonly

Utilisez l'attribut readonly pour définir l'élément d'entrée en lecture seule. Comme indiqué ci-dessous :

2. disabled

Utilisez l'attribut désactivé pour définir l'élément d'entrée sur un état désactivé, afin que l'utilisateur ne puisse pas cliquer ou effectuer quoi que ce soit. opérations. Cependant, le contenu du champ de saisie ne peut pas être copié dans ce cas. Comme indiqué ci-dessous :

Lorsque nous souhaitons modifier l'état de lecture seule de l'élément d'entrée, il existe deux méthodes courantes :

1. Modification dynamique à l'aide Valeur d'attribut JavaScript

Modifiez dynamiquement la valeur d'attribut en lecture seule de l'élément d'entrée via un script JavaScript pour contrôler son statut en lecture seule. Comme indiqué ci-dessous :

document.getElementById("myInput").readOnly = true;
document.getElementById("myInput").readOnly = false;

2. Utilisez le sélecteur CSS pour sélectionner la zone de saisie en lecture seule

via CSS Le sélecteur sélectionne un élément d'entrée en lecture seule, puis y ajoute des styles pour modifier son apparence ou déclencher d'autres effets. Comme indiqué ci-dessous :

input[readonly] {
color: #ccc;
Cursor: not-allowed;
}

Summary

Lors de la conception de pages Web, la zone de saisie en lecture seule est une fonction très pratique. Lors de l'utilisation de l'élément d'entrée, nous pouvons le définir en lecture seule via l'attribut readonly pour répondre à nos besoins de conception. De plus, l'utilisation de sélecteurs CSS et de scripts JavaScript est également un moyen courant de modifier l'état des zones de saisie en lecture seule.

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!