Textarea auto-hauteur augmentation

Question

J'ai html <textarea></textarea> et css:

textarea { 
    width: 100%; 
    max-height: 80px; 
    resize: none; 
} 

S'il y a beaucoup de texte, je veux le textarea augmenter sa hauteur jusqu'à ce 80px puis afficher une barre de défilement. Le problème est que textarea est 25px (je ne sais pas pourquoi, peut être mon navigateur définir cette propriété) et quand il y a beaucoup de texte, il montre une barre de défilement après 25px. Est-il possible de montrer une barre de défilement seulement après 80px?

Answer 1

Vous avez vraiment besoin js pour ce faire, voir exemple ci-dessous:

var textarea = document.getElementById("textarea"); 
 
var limit = 80; //height limit 
 

 
textarea.oninput = function() { 
 
    textarea.style.height = ""; 
 
    textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px"; 
 
};

textarea { 
 
    width: 100%; 
 
}

<textarea id="textarea"></textarea>