Eingabefeldbreite dynamisch an seine Eingabe anpassen

Das dynamische Anpassen der Breite eines Eingabefelds an seine Inhaltslänge kann die Benutzererfahrung verbessern und Vermeiden Sie unordentliche Layouts. Während das Festlegen einer festen Breite zu überschüssigem Platz oder abgeschnittenem Text führen kann, sorgt ein dynamischer Ansatz für ein optisch ansprechendes und funktionales Eingabefeld.

Leider funktioniert das Festlegen einer Mindestbreite mithilfe der CSS-Eigenschaft „min-width“ nicht Eingabefelder. Moderne Browser bieten jedoch eine alternative Einheit namens „ch“ (Zeichenbreite) an, die schriftartunabhängig ist und der Breite des Zeichens „0“ in jeder Schriftart entspricht.

Um eine dynamische Eingabefeldbreite zu erstellen, Wir können den folgenden JavaScript-Code verwenden:

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input); // Immediately call the function

function resizeInput() {
  this.style.width = this.value.length   "ch";
}

Dieser Code bindet eine Größenänderungsfunktion an das Eingabeereignis, die die Breite des Eingabefelds so aktualisiert, dass sie seiner Textlänge in ch-Einheiten entspricht. Darüber hinaus können wir den Stil des Eingabefelds in CSS wie folgt definieren:

input{ font-size:1.3em; padding:.5em; }

Damit ist die Implementierung einer dynamisch anpassbaren Eingabefeldbreite abgeschlossen, die sich je nach Inhalt automatisch erweitert oder verkleinert.