Autosizing Textareas

Manchmal sollen Textareas genau so groß sein, wie der Inhalt es erfordert. Dafür gibt es leider noch kein html attribut. Aber es gibt ein paar Hacks.

Ich habe hier ein Codepen für eine autosizing textarea.

Die notwendige Höhe der Textarea gibt steht in der textarea.scrollHeight . Aber um diese zu bekommen muss die textarea.style.height auf inherit gestellt werden. Weil die Höhe jetzt aber klein ist, scrollt der Browser an eine andere Stelle, wenn ich die Höhe jetzt auf textarea.style.height = textarea.scrollHeight+"px" setze.

Um das zu verhindern, wrappe ich die Textarea in eine Flexbox und stelle einen leeren div daneben. Dem gebe ich auch die Höhe mit heightKeeper.style.height = textarea.scrollHeight+"px" . Die Flexbox ist so hoch wie das höchste Element und für den kurzen Moment der inherit Höhe bewahrt der HeightKeeper die bisherige Höhe.