Détecter quand un champ texte est rempli
Nantes, le 12 mars 2024.
Pour appliquer un style différent aux champs de formulaires de type texte en fonction de s’ils sont remplis ou non, il n’est pas nécessaire de passer par une lecture leurs valeurs en JavaScript, mais il faut bidouiller un peu en CSS.
Avec un sélecteur d’attribut sur la valeur ?
<input type="text" value="foo" />[type="text"][value] {
}Ça fonctionne mais ça n’a rien de dynamique. Si l’utilisateur modifie la valeur dans le champs, cela n’aura aucun impact.
Avec une pseudo-classe :empty ?
[type="text"]:empty {
}Ça ne fonctionne pas. La pseudo-classe ne s’applique que si l’élément n’a aucun enfant, mais notre input ne peut même pas en contenir.
Avec une pseudo de classe sur la validité du champ ?
<input type="text" required="required" />[type="text"]:valid {
}Ça fonctionne mais l’attribut requis est imposé sur le champ pour que la mécanique puisse se mettre en place, ce qu’on ne souhaite pas toujours.
Avec une pseudo-classe inversée sur l’affichage du placeholder ?
<input type="text" placeholder="foo" />[type="text"]:not(:placeholder-shown) {
}C’est la bonne approche, elle fonctionne parfaitement. La logique du sélecteur doit cependant être inversée avec un :not pour que ce soit l’absence du texte de substitution qui soit détectée, et non sa présence.
Et si je n’utilise souhaite pas afficher de placeholder ?
<input type="text" placeholder=" " />Avec une espace insécable, par nature invisible, on retrouve le même comportement sans que l’UX en soit altérée d’aucune manière.
Fabien me pointe la solution officielle prévue par CSS, malheureusement supportée nulle part.
Vincent.