Admin/Dev

19
Oct.
2018

Astuce HTML/Javascript : Créer un textarea à la hauteur auto-adaptative

Publié par sky

Lors de la création d'un formulaire, l'utilisation de textarea est la solution, pour permettre au visiteur d'insérer de longs textes. Et afin de rendre ergonomique l'utilisation de ces champs, on leur attribue souvent une taille suffisamment grande pour l'ensemble du texte souhaité, afin d'éviter d'avoir un ascenseur de défilement. Malheureusement, insérer de grands textareas n'est pas très esthétique, et peut avoir l'effet inverse sur l'ergonomie.

Une solution que j'affectionne pour résoudre cette problèmatique est de créer un champ textarea qui va augmenter sa taille au fur et à mesure du remplissage.

Ainsi, tant qu'il n'est pas utilisé, il reste suffisament petit pour ne pas prendre tout l'espace visible de la page. Et avec du contenu, il n'y aura jamais d'ascenseur visible.

Imaginons, dans un formulaire "monForm", un champ tel que

<textarea name="monText" col="40" rows="1"></textarea>

L'information rows indique le nombre de ligne visible du textarea, ici nous choissions d'avoir juste une ligne visible pour commencer.

Puis nous attachons un script qui s'executera à chaque frappe de l'utilisateur dans le champ, via l'handler oninput.

<textarea name="monText" col="40" rows="1" oninput="updateTextareaHeight(this);"></textarea>

L'avantage de oninput est que cela va aussi fonctionner lorsque l'utilisateur va supprimer un gros morceau de son texte, via la suppression pure et simple, mais aussi en utilisant le fonctionnalité couper. Cela fonctionnera, si l'utilisateur copie un pavé directement dans le champs. Cela s'adapte à vraiment toutes les situations.

Il ne reste plus qu'à faire le script qui va avec, soit la fonction updateTextareaHeight.

function updateTextareaHeight(input) {
    input.style.height = 'auto';     input.style.height = input.scrollHeight+'px';
}

Ce script est assez simple, nous récupérons l'input pour lui dire de mettre sa taille, à la taille de son contenu.

Il est possible d'aller plus loin, et de contrôler la taille minimum et maximum du champ, simplement avec des styles CSS.

Il suffit d'appliquer une classe CSS à notre champ.

<textarea name="monText" col="40" rows="1" class="adaptatifTextarea" oninput="updateTextareaHeight(this);"></textarea>

Et de créer cette classe dans nos styles.

adaptatifTextarea {min-height:40px; max-height:100px;}

Ici nous afficherons 2 lignes minimum, et 5 maximum, ensuite l'ascenseur s'affichera de nouveau. Evidemment, cela variera selon la taille de vos caractères dans le champ.

Pour donner un effet plus smart à votre champ, vous pouvez aussi lui ajouter un d'agrandissement dynamique via une transition sur la hauteur.

A noter qu'il sera nécessaire d'utiliser une durée d'animation assez courte, et de faire cacher l'ascenseur afin qu'il ne s'affiche pas à chaque nouvelle ligne via le style CSS

overflow-y:hidden

ce qui le rendra incompatible avec l'application d'une taille maximale.

Enfin, pour terminer, si votre textarea peuvent être pré-remplis, il faudra forcer l'exécution du script une fois la page chargée.

window.onload = function() {
    updateTextareaHeight(document.monForm.monText);
}
 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Captcha indisponible
Pour valider le formulaire, vous devez confirmer que vous êtes bien une personne. Actuellement, la fonctionnalité est indisponible. Vous devez activer le service ReCaptcha dans le gestionnaire des cookies, et donc consentir à l'utilisation de ses cookies.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
ReCaptcha  En savoir plus
Permet de valider que les visiteurs sont bien des humains lorsqu'ils valident des formulaires.
 
Tout accepter Tout refuser Gérer