Wie passt man die Höhe des Textbereichs automatisch an den Inhalt an?

Höhenanpassung für Textbereiche

Viele Entwickler stehen vor der Herausforderung, Textbereichselemente automatisch dazu zu bringen, ihre Höhe an den darin enthaltenen Inhalt anzupassen. Dies verbessert die Benutzererfahrung, indem unnötige Bildlaufleisten entfernt werden.

Um diesem Bedarf gerecht zu werden, ist eine JavaScript-basierte Lösung verfügbar:

function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}

Zusammen mit diesem JavaScript-Code können CSS-Stile implementiert werden Behandeln Sie die Ästhetik des Textbereichs:

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

HTML-Implementierung nutzt das oninput-Ereignis, um die Höhenanpassung auszulösen:

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

Mit diesem Ansatz werden Textbereiche basierend auf ihrer Höhe automatisch erweitert oder verkleinert auf der Menge des eingegebenen Textes, wodurch Bildlaufleisten überflüssig werden und ein nahtloses Benutzererlebnis gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWie passt man die Höhe des Textbereichs automatisch an den Inhalt an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!