Comment rendre l'élément d'entrée en lecture seule à l'aide de CSS

Dans le développement Web, les éléments de formulaire sont un type d'élément très courant. L'élément d'entrée est l'un d'entre eux, qui peut accepter les entrées de l'utilisateur, notamment du texte, des chiffres, des dates, etc. Mais parfois, nous devons définir l'élément d'entrée en lecture seule, ce qui signifie que l'utilisateur ne peut rien saisir et ne peut que le visualiser. Cet article explique comment utiliser CSS pour rendre un élément d'entrée en lecture seule.

Tout d'abord, regardons comment un élément de saisie normal est créé :

<input type="text" name="username" id="username">

Il s'agit d'une zone de saisie de texte de base dans laquelle l'utilisateur peut saisir n'importe quoi. Ensuite, nous devons le définir en lecture seule. Pour ce faire, nous pouvons utiliser l'attribut "readonly" de l'élément input comme indiqué ci-dessous :

<input type="text" name="username" id="username" readonly>

Lorsque l'attribut "readonly" est défini, l'utilisateur ne pourra pas saisir de texte. Cependant, cette méthode présente un défaut, c'est-à-dire que l'utilisateur peut modifier les attributs de l'élément d'entrée via l'outil d'édition et le rendre éditable. Par conséquent, nous devons utiliser CSS pour contrôler le statut en lecture seule de l'élément d'entrée afin de garantir qu'il est en lecture seule en toutes circonstances.

Définir les éléments d'entrée en lecture seule à l'aide de CSS

Voici comment définir les éléments d'entrée en lecture seule à l'aide de CSS. Tout d'abord, nous utilisons le sélecteur "input[readonly]" pour sélectionner tous les éléments d'entrée qui contiennent l'attribut "readonly", puis nous ajoutons les propriétés de style CSS "pointer-events:none" et "background-color:#eee" à il.

input[readonly] {
   pointer-events:none;
   background-color:#eee;
}

L'attribut "pointer-events:none" empêchera l'utilisateur d'effectuer toute opération sur l'élément d'entrée en lecture seule via la souris ou un autre périphérique de pointage, comme des clics, des mouvements d'entrée/sortie de la souris, etc. Il garantit que les éléments d’entrée ne sont pas mal gérés par les utilisateurs.

L'attribut "background-color:#eee" permet de distinguer les éléments d'entrée en lecture seule des autres éléments d'entrée modifiables, ce qui facilite leur distinction.

Il s'agit d'un style CSS complet pour un élément d'entrée en lecture seule :

input[readonly] {
   pointer-events:none;
   background-color:#eee;
   border:none;
   color:#999;
}

Dans ce style, nous avons également ajouté les attributs "border:none" et "color:#999". Cela rendra les éléments d'entrée en lecture seule plus sombres pour les distinguer des autres éléments modifiables.

Bien sûr, vous pouvez personnaliser ces styles en fonction de vos besoins. Par exemple, vous pouvez définir la couleur d'arrière-plan d'un élément d'entrée en lecture seule sur gris et la couleur de police sur gris foncé pour mieux s'adapter au style de votre site Web.

Une dernière chose à noter est que si l'utilisation de CSS pour définir un élément d'entrée en lecture seule garantit qu'il est en lecture seule dans toutes les circonstances, les données provenant du serveur doivent toujours être validées et filtrées. En particulier, la vérification et le traitement des données du formulaire doivent être traités avec prudence.

Conclusion

CSS est un outil très puissant qui nous permet de contrôler facilement le style des éléments de notre site Web, y compris l'état de lecture seule des éléments d'entrée. En utilisant "pointer-events:none" et "background-color:#eee", nous pouvons garantir que l'élément d'entrée est en lecture seule dans toutes les circonstances et éviter une mauvaise utilisation de l'utilisateur. Dans le même temps, nous devons également prêter attention à la vérification et au filtrage des données des formulaires pour garantir la sécurité des données.

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!