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

Automatische Höhe von Textbereichen: Eine umfassende Anleitung

Bei der Arbeit mit Textbereichen ist es oft wünschenswert, deren Höhe automatisch basierend auf dem Textinhalt anzupassen Entfernen Sie übermäßiges Scrollen oder leeren Raum. Hier ist eine detaillierte Lösung, die sowohl CSS als auch JavaScript verwendet, um diesen Effekt zu erzielen:

CSS-Styling:

textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  padding: 15px 15px 30px;
  max-width: 100%;
}

Dieses CSS stellt sicher, dass die Größe des Textbereichs nicht geändert werden kann, sondern verbirgt sie Überlauf und legt die entsprechende Zeilenhöhe und den Zeilenabstand fest.

JavaScript Logik:

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

Diese JavaScript-Funktion wird verwendet, um die Höhe des Textbereichs basierend auf seinem Inhalt dynamisch anzupassen. Es legt eine Anfangshöhe von 5 Pixel fest und passt die Größe dann an die scrollHeight-Eigenschaft an, die die tatsächliche Höhe des Textinhalts darstellt.

HTML-Integration:

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

Hängen Sie den Oninput-Ereignis-Listener an den Textbereich an, der bei jeder Benutzereingabe die Funktion auto_grow() auslöst Text.

Implementierung:

Kombinieren Sie den CSS-Stil, die JavaScript-Funktion und die HTML-Integration, um einen Textbereich zu erstellen, der seine Höhe automatisch anpasst, während Sie tippen, und so für mehr Benutzerfreundlichkeit sorgt -freundliche und ästhetisch ansprechende Erfahrung.

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