Input text et effet de placeholder pour Woocommerce

Les articles Effet de placeholder sur un input et Input type text, auto format en date française avec effet de placeholder présentent des techniques d’animation de placeholder pour une zone de saisie de type text.

Captures d'écran sur fond d'une route dans le désert australien

Dans WordPress et pour le plugin Woocommerce, il existe la fonction woocommerce_form_field() qui écrit directement un élément de formulaire.

Pour ajouter un input de type text personnalisé dans la page checkout ou la page registration, on peut utiliser la fonction suivante :

Cet exemple montre un input pour une date de naissance. La valeur par défaut de la zone est $birthdate (définie plus tôt). Je veux entrer une date au format français, j’écris donc le placeholder jj/mm/aaaa et j’ajoute la classe input-placeholder.

La structure HTML renvoyée est la suivante :

Je veux cibler l’élément input. J’ai ajouté la classe input-placeholder avec la fonction woocommerce_form_field(). Cell-ci est écrite dans le paragraphe p qui enrobe le label du formulaire et l’élément input avec le nom name choisi c’est-à-dire le premier argument de la fonction.

Maintenant, il mettre cela en forme pour écrire le placeholder dans un élément span que l’on pourra animer en fonction du contenu entré dans la zone de saisie.

On écrit un script en déclarant une nouvelle classe inspector-input-placeholder (en espérant qu’elle ne sera jamais choisie par un quelconque programmeur) que l’on appliquera à notre élément input pour contrôler les événements focusin, focusout et input. On utilisera aussi la classe pHwrap pour un span qui englobera l’élément input et le span qui servira de placeholder. On ajoutera la classe focus au placeholder lorsque l’élément input sera modifié afin de déplacer le placeholder en haut à gauche de la saisie et de le changer de couleur. On utilise dans cet exemple un couleur bleue #64b5f6 que l’on mettra en forme dans un fichier de style SCSS.

Et le fichier de style SCSS que l’on peut intégrer comme un fichier partial à une feuille de style plus globale

Et hop, un bon moyen d’intégrer un effet de placeholder à des éléments de formulaires définis avec Woocommerce.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.