textarea Auto Height

Cette question explore comment ajuster automatiquement la hauteur d'une textarea pour correspondre à la durée de son contenu, éliminant efficacement la nécessité de bars verticaux. texte qu'ils contiennent. Si le texte dépasse la hauteur prédéfinie, elle devient inaccessible et nécessite de défiler.

La solution fournie ici utilise un JavaScript pur pour ajuster la hauteur d'une textaria en fonction de son contenu réel. Une fonction appelée "auto_grow" est définie qui définit initialement la hauteur de TextArea à "5px". Cela garantit qu'il a une hauteur minimale. Par la suite, il lit la propriété "ScrollHeight" de la TextArea, qui représente la hauteur de son contenu. La hauteur est ensuite ajustée pour correspondre à cette valeur, rendant efficacement la dynamique de hauteur de TextArea.

Pour intégrer cette fonctionnalité, le CSS suivant est recommandé:

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

Cela joint l'événement "onInput" à TextArea, qui déclenche la fonction "Auto_Grow" chaque fois que l'utilisateur entre le texte. En conséquence, la hauteur de TextArea s'adapte dynamiquement à la longueur de son contenu, offrant une expérience utilisateur transparente.