Pouvez-vous ajuster dynamiquement la hauteur de la zone de texte avec uniquement du CSS ?

Hauteur de la zone de texte dynamique avec CSS

Lors de la création d'une zone de texte pour la saisie de l'utilisateur, il est souvent souhaitable de l'agrandir ou de la réduire pour s'adapter à la quantité de contenu. Bien que des solutions impliquant JavaScript ou PHP existent, existe-t-il une méthode purement basée sur CSS ?

La solution :

Oui, il est possible d'utiliser CSS pour obtenir une zone de texte dynamique hauteur. Voici comment procéder :

1. Définissez la hauteur initiale sur auto : Pour permettre à la zone de texte de s'agrandir ou de se réduire selon vos besoins, définissez sa hauteur initiale sur "auto" :

textarea {
  height: auto;
}

2. Utilisez l'événement 'oninput' : Pour ajuster dynamiquement la hauteur de la zone de texte, attachez-y un gestionnaire d'événement 'oninput' :

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

3. Réinitialiser d'abord la hauteur : Avant de définir la hauteur en fonction du contenu, réinitialisez-la d'abord sur une chaîne vide. Cela garantit que la zone de texte peut rétrécir et s'étendre.
4. Calculer la hauteur réelle : Déterminez la hauteur réelle de la zone de texte en fonction de son contenu défilé et ajoutez-la sous forme de pixels à la propriété « hauteur » .

En mettant en œuvre ces étapes, vous pouvez créer une zone de texte qui ajustera automatiquement sa hauteur pour s'adapter à son contenu sans recourir à JavaScript ou PHP.

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!