Comment dimensionner automatiquement une zone de texte avec du JavaScript pur ?

Hauteur automatique de la zone de texte

Cette question vise à éliminer la barre de défilement d'une zone de texte et à ajuster sa hauteur pour qu'elle corresponde au contenu qu'elle contient. Une solution utilisant du code JavaScript pur est fournie :

<code class="js">function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}</code>

Pour garantir que la hauteur de la zone de texte se redimensionne dynamiquement au fur et à mesure de la saisie du texte, cette fonction est déclenchée par l'événement oninput. De plus, les propriétés CSS de la zone de texte peuvent être ajustées pour désactiver le redimensionnement et le débordement, tout en définissant les hauteurs minimale et maximale si vous le souhaitez :

<code class="css">textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}</code>

En mettant en œuvre ces ajustements, la zone de texte ajustera automatiquement sa hauteur pour correspondre au contenu, éliminant le besoin d'une barre de défilement tout en garantissant une expérience utilisateur élégante et réactive.

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!