Wie erstelle ich mit JavaScript und CSS eine selbstanpassende Textfeldhöhe?

Automatische Textarea-Höhe

Wenn es um Textarea-Elemente geht, kann die Verwaltung ihrer Höhe entscheidend für die Verbesserung der Benutzererfahrung und die Aufrechterhaltung der Ästhetik Ihrer Elemente sein Webanwendungen. Manchmal möchten Sie vielleicht, dass sich die Höhe Ihres Textbereichs automatisch an die Menge des darin enthaltenen Textes anpasst.

Eine effektive Lösung, um dies zu erreichen, ist JavaScript und CSS. Hier ist eine Schritt-für-Schritt-Anleitung zur Implementierung:

JavaScript:

1. Erstellen Sie eine JavaScript-Funktion, um die Textbereiche zu berechnen und zu aktualisieren Höhe:

function auto_grow(element) {
  // Set the initial height to a small value (e.g., 5px)
  element.style.height = "5px";

  // Calculate the new height based on the scrollHeight property
  element.style.height = (element.scrollHeight) + "px";
}

CSS:

2. Stilen Sie den Textbereich so, dass vertikales Scrollen verhindert wird, und legen Sie minimale Abmessungen fest:

textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}

HTML:

3. Hinzufügen Der Ereignis-Listener ruft die Funktion „auto_grow“ auf, wenn sich der Inhalt des Textbereichs ändert:

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

Durch die Implementierung dieser Lösung wird die Höhe des Textbereichs automatisch angepasst, wenn Text eingegeben oder entfernt wird, was für einen dynamischen und komfortablen Benutzer sorgt Erfahrung.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit JavaScript und CSS eine selbstanpassende Textfeldhöhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!