Comment implémenter le réglage automatique de la hauteur dans les champs de zone de texte ?

Hauteur automatique de la zone de texte

Cette question explore comment ajuster automatiquement la hauteur d'une zone de texte pour qu'elle corresponde à la longueur de son contenu, éliminant ainsi efficacement le besoin de barres de défilement verticales.

Le problème vient du fait que par défaut, les zones de texte ont une hauteur fixe quelle que soit la quantité de texte qu'elles contiennent. Si le texte dépasse la hauteur prédéfinie, il devient inaccessible et nécessite un défilement.

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

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

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

Ce CSS supprime le redimensionne les poignées, empêche les débordements visibles et définit les restrictions de hauteur minimale et maximale.

Enfin, pour utiliser le dimensionnement automatique, le HTML suivant est utilisé :

<code class="html"><textarea oninput="auto_grow(this)"></textarea></code>

Ceci attache le "oninput " à la zone de texte, qui déclenche la fonction "auto_grow" chaque fois que l'utilisateur saisit du texte. En conséquence, la hauteur de la zone de texte s'ajuste dynamiquement à la longueur de son contenu, offrant ainsi une expérience utilisateur fluide.

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!