css rend l'entrée non modifiable

Pendant le processus de développement front-end, vous pouvez parfois rencontrer des situations dans lesquelles vous devez définir les balises d'entrée pour qu'elles ne soient pas modifiables. Cette situation peut être obtenue grâce à CSS. Ensuite, nous expliquerons en détail comment utiliser CSS pour rendre l'entrée non modifiable.

1. Désactiver les éléments d'entrée

Le moyen le plus courant de désactiver les éléments d'entrée consiste à utiliser l'attribut "désactivé". Définir la propriété « disabled » sur « true » désactive la zone de saisie et la rend grise. De cette façon, l'utilisateur ne peut pas modifier ou saisir quoi que ce soit dans la zone de saisie.

Par exemple, nous pouvons écrire du code comme ceci :

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

2. Utilisez CSS pour désactiver l'élément de saisie

Si vous n'utilisez pas l'attribut "disabled", nous pouvons également désactiver la zone de saisie via CSS. Tout d'abord, nous pouvons utiliser la propriété CSS "pointer-events" pour définir la zone de saisie comme non interactive. De cette façon, l'utilisateur ne peut pas taper dans la zone de saisie ni utiliser le curseur pour se déplacer.

Par exemple :

input{
  pointer-events:none;
}

Cependant, cette méthode ne peut pas complètement obtenir l'effet de rendre la zone de saisie non modifiable. Les utilisateurs peuvent toujours insérer du texte ou modifier du texte dans la zone de saisie en coupant, copiant, collant, etc., car la zone de saisie peut toujours obtenir le focus dans ce cas. Pour éviter cela, nous devons utiliser un CSS plus strict.

Nous pouvons utiliser l'attribut "user-select" pour empêcher l'utilisateur de sélectionner du texte à l'intérieur de l'élément. De cette manière, l'utilisateur ne peut pas sélectionner ou modifier le texte dans la zone de saisie.

Par exemple :

input{
  pointer-events: none;
  user-select: none;
}

À ce moment-là, nous constaterons que la zone de saisie est devenue totalement non modifiable. Les utilisateurs ne peuvent insérer ou modifier aucun contenu. Si nous voulons supprimer cet état, nous devons supprimer cet attribut en CSS ou ajouter cet attribut manuellement à l'aide du code JavaScript.

3. Résumé

Grâce à l'explication ci-dessus, nous pouvons voir que l'effet de rendre la zone de saisie non modifiable peut être obtenu en utilisant CSS. Une façon consiste à utiliser l'attribut "disabled" pour désactiver la zone de saisie, et l'autre consiste à utiliser les attributs "pointer-events" et "user-select" pour définir la zone de saisie pour qu'elle soit non interactive et non sélectionnable. . Ces méthodes peuvent nous aider à répondre à différents besoins et à améliorer l'efficacité pendant le processus de développement.

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!