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.