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.
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 :
|
1 2 3 4 5 6 7 |
woocommerce_form_field( 'clio_birthdate', array( 'type' => 'text', 'label' => __( 'Birth Date', 'cum' ), 'placeholder' => 'jj/mm/aaaa', 'class' => ['input-placeholder'], 'required' => true, ), $birthdate ); |
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 :
|
1 2 3 4 5 6 7 8 |
<p class="form-row input-placeholder validate-required" id="clio_birthdate_field" data-priority=""> <label for="clio_birthdate" class=""> Date de naissance <abbr class="required" title="obligatoire">*</abbr> </label> <span class="woocommerce-input-wrapper"> <input type="text" class="input-text " name="clio_birthdate" id="clio_birthdate" placeholder="jj/mm/aaaa" value="23/09/1963"> </span> </p> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
/* * Input Effect */ const inspectorPlaceholder = 'inspector-input-placeholder'; Element.prototype.inputEffectWoo = function() { const input = this.querySelector('input'); input.classList.add(inspectorPlaceholder) const wrap = document.createElement('span'); input.insertAdjacentElement('afterend', wrap); wrap.appendChild(input); wrap.classList.add('pHWrap'); const placeholder = document.createElement('span'); const placeholderText = input.placeholder; placeholder.innerText = placeholderText; input.insertAdjacentElement('afterend', placeholder); input.placeholder = ''; // if value is already filled, add class `focus` to the input if (input.value) { placeholder.classList.add('focus'); } }; [...document.getElementsByClassName('input-placeholder')].forEach(el => el.inputEffectWoo()); document.addEventListener('focusin', e => { if (e.target.classList.contains(inspectorPlaceholder)) { const placeholder = e.target.nextSibling; if (e.target.value) { placeholder.classList.add('focus'); } } }); document.addEventListener('focusout', e => { if (e.target.classList.contains(inspectorPlaceholder)) { if (! e.target.value) { const placeholder = e.target.nextSibling; placeholder.classList.remove('focus'); } } }); document.addEventListener('input', e => { if (e.target.classList.contains(inspectorPlaceholder)) { const placeholder = e.target.nextSibling; if (! e.target.value) { placeholder.classList.remove('focus'); } else { placeholder.classList.add('focus'); } } }); |
Et le fichier de style SCSS que l’on peut intégrer comme un fichier partial à une feuille de style plus globale
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/** * SCSS for input type text with the class input-placeholder * <input type="text" class="input-placeholder" */ $font-size: 1em; $font-family: inherit; $color-before: #a8a8a8; $color-after: #64b5f6ff; .pHWrap { position: relative; span { pointer-events: none; position: absolute; top: -1px; left: 16px; font-family: $font-family; font-size: $font-size; color: $color-before; transition: 0.2s; &.focus { color: $color-after; top: -17px; left: 1px; font-size: 0.68em; } } } |
Et hop, un bon moyen d’intégrer un effet de placeholder à des éléments de formulaires définis avec Woocommerce.
