Comment ajuster automatiquement la hauteur de la zone de texte pour l'adapter au contenu ?

Ajustement de la hauteur des zones de texte

De nombreux développeurs sont confrontés au défi de faire en sorte que les éléments de zone de texte ajustent automatiquement leur hauteur pour s'adapter au contenu qu'ils contiennent. Cela améliore l'expérience utilisateur en supprimant les barres de défilement inutiles.

Pour répondre à ce besoin, une solution basée sur JavaScript est disponible :

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

Avec ce code JavaScript, des styles CSS peuvent être implémentés pour gérer l'esthétique de la zone de texte :

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

L'implémentation HTML utilise l'événement oninput pour déclencher l'ajustement de la hauteur :

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

Avec cette approche, les zones de texte agrandiront ou contracteront automatiquement leur hauteur en fonction sur la quantité de texte saisi, supprimant le besoin de barres de défilement et garantissant une expérience utilisateur transparente.

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!