Comment créer une hauteur de zone de texte auto-ajustable avec JavaScript et CSS ?

Hauteur automatique de Textarea

En ce qui concerne les éléments Textarea, la gestion de leur hauteur peut être cruciale pour améliorer l'expérience utilisateur et maintenir l'esthétique de votre applications Web. Parfois, vous souhaiterez peut-être que la hauteur de votre zone de texte s'ajuste automatiquement en fonction de la quantité de texte qu'elle contient.

Une solution efficace pour y parvenir consiste à utiliser JavaScript et CSS. Voici un guide étape par étape pour l'implémenter :

JavaScript :

1. Créez une fonction JavaScript pour calculer et mettre à jour la zone de texte hauteur :

function auto_grow(element) {
  // Set the initial height to a small value (e.g., 5px)
  element.style.height = "5px";

  // Calculate the new height based on the scrollHeight property
  element.style.height = (element.scrollHeight) + "px";
}

CSS :

2. Stylez la zone de texte pour empêcher le défilement vertical et définissez des dimensions minimales :

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

HTML :

3. Ajouter l'écouteur d'événements pour appeler la fonction auto_grow lorsque le contenu de la zone de texte change :

<textarea oninput="auto_grow(this)"></textarea>

En implémentant cette solution, la hauteur de la zone de texte s'ajustera automatiquement à mesure que du texte est saisi ou supprimé, offrant un utilisateur dynamique et pratique expérience.

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!