Auto-Höhe von Textbereichen
Eine häufige Herausforderung bei der Arbeit mit Textbereichen besteht darin, sicherzustellen, dass sie ihre Höhe an die Eingaben des Benutzers anpassen, ohne dass dies erforderlich ist eine Bildlaufleiste. Dieses Problem tritt in Szenarien auf, in denen der Inhalt des Textbereichs häufig unterschiedlich lang ist. So können Sie dies mit reinem JavaScript erreichen:
Das bereitgestellte Code-Snippet nutzt eine JavaScript-Funktion namens auto_grow, die die Höhe des Textbereichs basierend auf seinem Inhalt dynamisch anpasst:
function auto_grow(element) {
element.style.height = "5px";
element.style.height = (element.scrollHeight) + "px";
}Im CSS Sie können die folgenden Stile definieren, um die Bildlaufleiste zu entfernen und minimale und maximale Höhen festzulegen:
textarea {
resize: none;
overflow: hidden;
min-height: 50px;
max-height: 100px;
}Um diese Funktionalität zu implementieren, Fügen Sie einfach das Attribut oninput zu Ihrem