suchen

Heim >Web-Frontend >CSS-Tutorial >Wie kann ich selbstanpassende Textbereiche in JavaScript erstellen?

Wie kann ich selbstanpassende Textbereiche in JavaScript erstellen?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-15 06:30:11417Durchsuche

How Can I Create Self-Adjusting Textareas in JavaScript?

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