Le réglage automatisé de la hauteur peut-il éliminer les barres de défilement dans les zones de texte ?

Ajustement automatique de la hauteur de la zone de texte

Q : Puis-je ajuster la hauteur d'une zone de texte pour qu'elle corresponde à la hauteur du texte qu'elle contient, en éliminant la nécessité d'une barre de défilement ?

R : Oui, l'implémentation de cette fonctionnalité est possible avec JavaScript.

Voici un simple extrait de code JavaScript qui utilise la propriété scrollHeight de l'élément textarea pour ajuster automatiquement sa hauteur au fur et à mesure que l'utilisateur tape :

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

De plus, vous pouvez ajouter des règles CSS pour empêcher le redimensionnement de la zone de texte et masquer la barre de défilement :

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

Avec à la fois la fonction JavaScript et les règles CSS en place, la zone de texte ajustera automatiquement sa hauteur pour s'adapter au contenu du texte, offrant ainsi une expérience utilisateur transparente en éliminant le besoin d'une barre 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!