Comment créer une hauteur de zone de texte auto-ajustable avec CSS et JavaScript ?

Hauteur automatique de la zone de texte : un guide complet

Lorsque vous travaillez avec des zones de texte, il est souvent souhaitable d'ajuster automatiquement leur hauteur en fonction du contenu du texte pour supprimez le défilement excessif ou l’espace vide. Voici une solution détaillée utilisant à la fois CSS et JavaScript pour obtenir cet effet :

Style CSS :

textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  padding: 15px 15px 30px;
  max-width: 100%;
}

Ce CSS garantit que la zone de texte n'est pas redimensionnable, masque tout débordement et définit la hauteur de ligne et le remplissage appropriés.

JavaScript Logique :

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

Cette fonction JavaScript est utilisée pour ajuster dynamiquement la hauteur de la zone de texte en fonction de son contenu. Il définit une hauteur initiale de 5 px, puis la redimensionne selon la propriété scrollHeight, qui représente la hauteur réelle du contenu du texte.

Intégration HTML :

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

Attachez l'écouteur d'événement oninput à la zone de texte, qui déclenche la fonction auto_grow() chaque fois que l'utilisateur entre text.

Implémentation :

Combinez le style CSS, la fonction JavaScript et l'intégration HTML pour créer une zone de texte qui ajuste automatiquement sa hauteur au fur et à mesure que vous tapez, offrant ainsi une plus grande visibilité à l'utilisateur. -expérience conviviale et esthétique.

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!