Comment implémenter le réglage dynamique de la hauteur d'une zone de texte sans barres de défilement ?

La hauteur automatique de Textarea revisitée

Question :

De nombreux développeurs ont rencontré le besoin d'ajuster la hauteur d'une zone de texte de manière dynamique pour y adapter le contenu. Cela améliore non seulement l'expérience utilisateur, mais élimine également les barres de défilement inutiles.

Solution :

Une approche pour y parvenir consiste à utiliser du JavaScript pur. Voici un extrait de code qui ajuste efficacement la hauteur d'une zone de texte :

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

Dans ce code :

• l'élément est la zone de texte que vous souhaitez ajuster.
• La hauteur initiale est définie sur une petite valeur (5 px) pour permettre un calcul précis.
• La propriété scrollHeight renvoie la hauteur du contenu de la zone de texte, y compris le débordement masqué.
• Définition de la hauteur sur la la hauteur de défilement l'ajuste dynamiquement pour l'adapter au contenu.

Pour implémenter cette fonctionnalité en CSS et HTML :

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

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

• resize : aucun ; empêche la zone de texte d'être redimensionnée par l'utilisateur.
• overflow : caché ; masque tout contenu excédentaire au-delà de la hauteur définie.
• min-height et max-height définissent les limites de hauteur minimale et maximale.
• L'événement oninput déclenche la fonction auto_grow chaque fois que l'entrée dans la zone de texte change .

Cette solution garantit que la hauteur de la zone de texte correspond au contenu qu'elle contient, offrant ainsi une expérience utilisateur améliorée sans 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!