Comment puis-je détecter le texte dans les champs de saisie en utilisant uniquement CSS ?

Détecter le texte dans les champs de saisie à l'aide de CSS

CSS offre des options limitées pour détecter si un champ de saisie contient du texte. La pseudo-classe :empty et le sélecteur [value=""] ne fournissent pas de résultats satisfaisants.

Solution utilisant :placeholder-shown

Pour les champs de saisie avec un espace réservé attribut, la pseudo-classe :placeholder-shown peut être utilisée. L'attribut placeholder définit un texte d'espace réservé qui apparaît lorsque l'entrée est vide. En exploitant cette propriété, la règle CSS suivante peut être appliquée :

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

Lorsque l'entrée est vide, le texte de l'espace réservé est affiché et la bordure de l'entrée sera définie en rouge. Lorsque l'utilisateur saisit du texte, le texte d'espace réservé disparaît et la couleur de la bordure passe au vert, indiquant la présence de texte dans la saisie.

Limitations

Cette solution a quelques limitations :

• Il nécessite que le champ de saisie ait un attribut d'espace réservé.
• Le texte de l'espace réservé ne peut pas être vide. Cependant, un seul caractère espace peut être utilisé pour créer un espace réservé invisible.

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!