Wie kann ich selbstanpassende Textbereiche in JavaScript erstellen?

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 hinzu. Element, das die Funktion auto_grow aufruft, wenn der Benutzer Folgendes eingibt:

<textarea oninput="auto_grow(this)"></textarea>

Mit dieser Implementierung passt Ihr Textbereich seine Höhe automatisch an die Länge seines Inhalts an und bietet so ein nahtloses Benutzererlebnis, ohne dass eine Bildlaufleiste erforderlich ist .

Das obige ist der detaillierte Inhalt vonWie kann ich selbstanpassende Textbereiche in JavaScript erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!