Comment puis-je créer des zones de texte auto-ajustables en JavaScript ?

Zones de texte à hauteur automatique

Un défi courant lorsque l'on travaille avec des zones de texte est de s'assurer qu'elles ajustent leur hauteur pour s'adapter à la saisie de l'utilisateur sans avoir besoin de une barre de défilement. Cette préoccupation survient dans les scénarios où la longueur du contenu de la zone de texte varie souvent. Voici comment y parvenir en utilisant du JavaScript pur :

L'extrait de code fourni exploite une fonction JavaScript nommée auto_grow qui ajuste dynamiquement la hauteur de la zone de texte en fonction de son contenu :

function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}

Dans le CSS, vous pouvez définir les styles suivants pour supprimer la barre de défilement et définir les hauteurs minimale et maximale :

textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}

Pour implémenter cette fonctionnalité, ajoutez simplement l'attribut oninput à votre élément, appelant la fonction auto_grow lorsque l'utilisateur tape :

<textarea oninput="auto_grow(this)"></textarea>

Avec cette implémentation, votre zone de texte ajustera automatiquement sa hauteur pour correspondre à la longueur de son contenu, offrant une expérience utilisateur transparente sans avoir besoin d'une barre de défilement .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!