Wie kann ich die Breite eines Eingabefelds automatisch skalieren, um sie an seinen Inhalt in JavaScript und jQuery anzupassen?

Automatische Skalierung der Breite eines Eingabefelds, um sie an den Eingabewert anzupassen

Im Bereich der Webentwicklung ist es oft wünschenswert, die Breite dynamisch anzupassen eines Eingabefeldes entsprechend der Länge seines Inhalts. Dadurch wird sichergestellt, dass das Feld nur den nötigen Platz auf dem Bildschirm einnimmt. So erreichen Sie dies mit JavaScript und jQuery:

Lösung:

1. Stellen Sie die Anfangsbreite auf „Auto“ ein:

Legen Sie zunächst die Breiteneigenschaft des Eingabefelds als „Auto“ fest. Dadurch kann sich das Feld je nach Inhalt auf natürliche Weise erweitern.

input {
  display: block;
  margin: 20px;
  width: auto;
}

2. Breite bei Tastendruck aktualisieren:

Als nächstes verwenden Sie jQuery, um das Größenattribut des Eingabefelds jedes Mal zu aktualisieren, wenn eine Taste gedrückt wird. Dieses Attribut bestimmt die Anzahl der Zeichen, die das Feld enthalten kann. Durch die Einstellung auf die Länge des Inhalts wird das Feld automatisch auf die entsprechende Breite skaliert.

$('input[type="text"]').keyup(function() {
  $(this).attr('size', $(this).val().length);
});

3. Größe beim Laden der Seite ändern:

Nachdem Sie den Ereignishandler eingerichtet haben, lösen Sie das Größenänderungsverhalten manuell aus, sobald die Seite geladen wird. Dadurch wird sichergestellt, dass die Felder bei der ersten Anzeige die richtige Größe haben.

$('input[type="text"]').each(function() {
  $(this).attr('size', $(this).val().length);
});

Beispiel:

Berücksichtigen Sie den folgenden HTML-Code:

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />
<input type="text" value="me too" />

Wann Beim Laden der Seite wird die Breite beider Eingabefelder an den Text angepasst Inhalt.

Hinweis:

Während dieser Ansatz die Breite des Eingabefelds effektiv skaliert, kann es dazu führen, dass auf der rechten Seite etwas Abstand hinzugefügt wird. Um eine engere Passform zu erreichen, können Sie eine Technik wie das Messen der Pixelgröße des Texts und das entsprechende Anpassen der Breiteneigenschaft in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite eines Eingabefelds automatisch skalieren, um sie an seinen Inhalt in JavaScript und jQuery anzupassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!