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

Eingabefeldbreite dynamisch an seinen Inhalt anpassen

Während der bereitgestellte CSS-Code style="min-width:1px;" Da dies bei Eingabefeldern möglicherweise nicht effektiv funktioniert, gibt es eine alternative Lösung, die die Breite des Eingabefelds basierend auf seinem Inhalt dynamisch anpasst. Bei diesem Ansatz wird die CSS-Einheit „ch“ (Zeichen) verwendet, die die Breite des Zeichens „0“ (Null) in der gewählten Schriftart darstellt.

Um diese Lösung zu implementieren, kann JavaScript zur Verarbeitung verwendet werden „Eingabe“-Ereignis, das immer dann ausgelöst wird, wenn der Benutzer etwas in das Eingabefeld eingibt. Innerhalb dieses Event-Handlers können folgende Aktionen ausgeführt werden:

<code class="javascript">var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

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

Zusätzlich kann CSS wie folgt angewendet werden, um das Erscheinungsbild des Eingabefelds zu verfeinern:

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

Zusammen, Diese Änderungen ermöglichen es dem Eingabefeld, seine Breite fließend an den Inhalt anzupassen und gleichzeitig die Lesbarkeit beizubehalten. Die „ch“-Einheit stellt sicher, dass die Breite proportional zu den eingegebenen Zeichen ist, was zu einem dynamisch reagierenden Eingabefeld führt.

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