recherche

Maison >interface Web >tutoriel CSS >Comment puis-je créer des zones de texte auto-ajustables en JavaScript ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-12-15 06:30:11415parcourir

How Can I Create Self-Adjusting Textareas in 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