Comment puis-je redimensionner automatiquement une zone de texte en fonction de son contenu et masquer les barres de défilement ?

Hauteur de la zone de texte déterminée par le contenu, barres de défilement supprimées

Problème :

Atteindre la hauteur d'une zone de texte qui s'ajuste dynamiquement pour s'adapter à son contenu, éliminant ainsi le besoin de barres de défilement.

Solution utilisant JavaScript :

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

Style CSS :

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

Implémentation :

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

Avec ce code, la hauteur de la zone de texte s'agrandira ou se contractera pour s'adapter au contenu, supprimant ainsi le besoin de barres 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!