Textarea ohne Scrollbalken

Beispiel

Hier mal ein Beispiel von einer Textarea mit und ohne Scrollbalken. Kopiere folgenden Fülltext oder schreibe einfach selbst ins das jeweilige Textfeld, um das Verhalten bei Erreichung der vorgegebenen Höhe zu beobachten.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Wie du siehst, erweitert sich die Höhe des ersten Textfeldes automatisch. Wie das funktioniert, erfährst du im Folgenden.

HTML-Code

Fangen wir mit dem HTML-Teil an. Wir erzeugen die Textarea wie folgt:

                            
<textarea rows="1" placeholder="Hier einfügen"></textarea> 

                            

Wichtig ist hier das row="1". Es definiert die Anzahl der Spalten innerhalb der Textarea. In diesem Fall der Wert 1, also 1 Spalte. Demnach würde unser Textfeld so aussehen:

CSS-Code

Das Styling der Textarea bleibt dir überlassen. Dennoch ist ein klein wenig CSS für die automatische Höhe des Textfeldes nötig. Wir geben der Textarea die Eigenschaft: overflow: hidden;. Dadurch verschwindet der Scrollbalken innerhalb des Feldes.

                            
textarea { 
    overflow: hidden;
}

                            

JS-Code

Nun kommt Javascript ins Spiel. Mit folgenden Code erkennt unsere Textarea automatisch die Höhe und wir brauchen nicht mehr scrollen.

                            
$(document).ready(function () {

// Anfang
    document.querySelectorAll('textarea').forEach(el => {
        el.style.height = el.setAttribute('style', 'height:' + el.scrollHeight + 'px');
        el.classList.add('auto');
        el.addEventListener('input', e => {
            el.style.height = 'auto';
            el.style.height = (el.scrollHeight) + 'px';
        });
    });
// Ende

});
                            

Schlusswort

Die automatische Anpassung des Textfeldes ist eine super Möglichkeit, um die Nutzererfahrung zu verbessern. Erinnere dich mal daran zurück, wie häufig du bei Textfeldern (sei es ein Kommentar o.a. bei einem Kontaktformular) schon hochscrollen musstest, weil die Höhe des Textfeldes nicht ausreichte. Dies kann unter Umständen sehr nervig sein, weil der verfasste Text nicht in eins sichtbar ist.