Comment puis-je détecter la saisie de texte dans un champ de saisie HTML en utilisant uniquement CSS ?

Détection de la saisie de texte à l'aide de CSS

Une exigence courante se pose lors de la personnalisation de pages Web à l'aide de CSS : la possibilité de détecter si un champ de saisie contient du texte . Étonnamment, cette fonctionnalité n'est pas directement fournie par CSS.

Tentatives de solutions

Diverses approches ont échoué, notamment l'utilisation de la pseudo-classe :empty et la vérification des valeurs vides. [value=""].

Espace réservé CSS Approche

Cependant, si le champ de saisie a un attribut placeholder, CSS propose une solution : la pseudo-classe :placeholder-shown. Cette classe peut être utilisée pour faire la distinction entre un champ de saisie vide et un champ avec un espace réservé.

Implémentation

La clé est de s'assurer que l'attribut espace réservé est présent et contient une valeur non vide, même s'il ne s'agit que d'un seul espace. Voici un exemple :

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

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

Conclusion

En utilisant la pseudo-classe :placeholder-shown, vous pouvez détecter efficacement si un champ de saisie contient du texte, même sur les pages où vous n'avez aucun contrôle.

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!