Wie passt man die Breite eines Eingabefelds basierend auf seinem Inhalt dynamisch an?

Eingabefeldbreite an seinen Inhalt anpassen

Beim Versuch, die Mindestbreite eines Eingabefelds mit „min-width“ festzulegen, funktioniert das nicht Funktioniert es nicht wie erwartet, sind alternative Lösungen erforderlich. Eine solche Lösung ist die Verwendung der CSS-Einheit „ch“, die die Breite des Zeichens „0“ in einer bestimmten Schriftart darstellt.

In modernen Browsern kann das folgende CSS verwendet werden:

<code class="css">input {
  font-size: 1.3em;
  padding: 0.5em;
}</code>

Um die Breite des Eingabefelds basierend auf seinem Inhalt anzupassen, kann eine JavaScript-Funktion an das Ereignis „input“ gebunden werden:

<code class="javascript">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);

function resizeInput() {
  this.style.width = this.value.length + "ch";
}</code>

Diese JavaScript-Funktion ändert die Breite des Eingabefelds entsprechend die Länge seines Werts plus 1 „ch“, um die Polsterung zu berücksichtigen. Der Ereignis-Listener stellt sicher, dass die Breite aktualisiert wird, wenn sich der Eingabewert ändert.

Hinweis: Dieser Ansatz ist aufgrund von Browserkompatibilitätsproblemen mit der „ch“-Einheit möglicherweise nicht für alle Szenarios geeignet. Testen Sie Ihren Code immer in verschiedenen Browsern und Betriebssystemen, um die gewünschte Funktionalität sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie passt man die Breite eines Eingabefelds basierend auf seinem Inhalt dynamisch an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!