Wie kann ich die Größe von Eingabefeldern basierend auf der Inhaltslänge dynamisch ändern?

Anpassen der Breite von Eingabefeldern an ihre Eingabe

Problem:Ändern der Breite eines Eingabefelds, um es mithilfe von HTML an seinen Inhalt anzupassen, JavaScript, PHP oder CSS stellen eine Herausforderung dar. Das Attribut „min-width“ ist wirkungslos und feste Breiten können zu einer visuellen Unordnung führen.

Lösung:

Erwägen Sie die Verwendung der ch-Einheit von CSS, die eine von der Schriftart unabhängige Messung darstellt entsprechend der Breite des Nullzeichens. Durch die Bindung einer Größenänderungsfunktion an das Eingabeereignis kann die Breite des Eingabefelds dynamisch angepasst werden:

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

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

Um dies zu ergänzen, wenden Sie die folgenden CSS-Stile an:

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

Dadurch wird sichergestellt Das Eingabefeld passt seine Breite an die Länge seines Inhalts an und behält dabei den gewünschten Abstand und die gewünschte Schriftgröße bei.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von Eingabefeldern basierend auf der Inhaltslänge dynamisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!