Effet de placeholder sur un input

Les éléments de formulaire HTML input possèdent un attribut placeholder qui permet de donner à l’utilisateur une indication sur une information à entrer. Par exemple, si l’on demande un N° de téléphone, on peut montrer une information concernant une forme attendue. Il ne s’agit pas de formater l’entrée de l’utilisateur, ou même empêcher certains caractères, mais seulement de fournir une aide informative.

Exemple de placeholders sur fond de Tre Cime di Lavaredo dans les Dolomites italiennes

Un champ input s’écrit :

Cela donne :

N° de Téléphone :

Le comportement par défaut est défini comme tel : lorsque l’utilisateur donne le focus à la zone de saisie, c’est-à-dire qu’il sélectionne la zone de saisie, au premier caractère entré, le placeholder et l’information supplémentaire qu’il apporte disparaît.

Certains développeurs utilisent ce placeholder pour se dispenser de nommer un label donnant un titre à l’entrée, ici N° téléphone, en privilégiant un design minimaliste.

Cela peut être quelque chose de pénible ou de par forcément optimisé, pour l’utilisateur, car ce dernier peut vite oublier cette information et éviter d’en tenir compte. Le seul moyen qu’il ait à sa disposition pour faire réapparaître cette information est d’effacer son entrée de la zone de saisie.

Un nouveau comportement apparaît ces derniers temps. Le contenu du placeholder est recopié en haut de la zone de saisie pendant que l’utilisateur remplit l’entrée. Si l’utilisateur efface l’entrée, parfois le placeholder reprend sa place, parfois la zone de saisie reste vide.

Dans la suite, je montre ces deux comportements. Ceci peut être fait en pur CSS Cascading Style Sheets, ou bien accompagné par un peu de javascript. L’essentiel est de remplacer le placeholder de l’input par une div en position: absolute que l’on déplace avec un certain effet lors de la saisie de l’utilisateur. Le javascript sert uniquement à transformer l’entrée :

par

L’élément span, frère suivant de l’élément input, aura une position: absolute pour remplacer le placeholder par défaut. La div enveloppante aura une position: relative. La directive CSS pointer-events: none sur cet élément permet de ne pas capturer l’événement focus avec la souris ou l’appui sur Tab et de le déléguer à l’élément input qui se situe en-dessous.

Demo

Javascript

On lance la méthode inputEffect() sur des éléments HTML js :

sur le HTML suivant :

Style SCSS

L’input doit avoir la classe input-placeholder, sinon vous changer cela dans le style. On peut bien-sûr changer les couleurs et la police de caractères, les valeurs $top et $left sont à affiner en fonction du style global sur l’élément input. $gap est l’espace vertical en pixel pour insérer le placeholder lorsque la zone de saisie est sélectionnée, $diff est une valeur de correction pour rattraper les différences de position entre le span du placeholder et l’attribut original.

Une vidéo Dev Ed’s video, point de départ et d’inpiration au sujet des animations d’input en HTML et CSS :

et un code sur Codepen :

See the Pen Input placeholder into label on focus by Tiantsoa (@tiantsoa) on CodePen.

Et hop, une jolie zone de saisie, moderne et pratique.

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.