Pour masquer le placeholder d’un champ lorsqu’il reçoit le focus, utilisez le pseudo-élément CSS ::placeholder avec le sélecteur :focus. Les préfixes destinés aux anciens navigateurs ne sont plus nécessaires. Toutefois, conservez toujours un label visible et ne placez pas d’instruction essentielle uniquement dans le placeholder.
Je viens de finir un projet sur Codeable qui utilisait WordPress et Gravity Forms et lors de la réalisation d’un formulaire de réservation complexe, je me suis heurté à Chrome qui ne supprime pas toujours (suivant les versions utilisées) le texte du placeholder d’un champ de type input ou textarea lorsque le curseur est placé à l’intérieur (action focus).
Le texte défini dans l’attribut HTML placeholder reste normalement visible tant qu’un champ est vide. Il ne disparaît pas automatiquement lorsque l’utilisateur clique dans le champ.
Ce comportement est volontaire. Le placeholder disparaît lorsque l’utilisateur commence à saisir une valeur.
Dans certaines interfaces, on peut néanmoins préférer le masquer dès que le champ reçoit le focus. Quelques lignes de CSS suffisent. Aucun JavaScript n’est nécessaire.
