Wie berechnet man die Breite eines Eingabe-HTML-Elements, so dass es mit der Größe seines Inhalts übereinstimmt? Ich aktualisiere eine Eingabe im laufenden Betrieb, wenn der Benutzer Folgendes eingibt:
%Vor%Das scheint jedoch nicht ganz korrekt zu sein, weil es nicht berücksichtigt, dass einige Zeichen länger sind als andere:
Wie geht es weiter?
PS: Warum möchte ich das machen (schon beantwortet in einer Antwort, die gelöscht wurde)? Ich habe Sätze, in denen ich den Klammerinhalt durch Eingaben ersetzen muss (zB: [Benutzer] ist [Jahre] alt). Ich habe keine Ahnung, was der Satz sein kann, daher kenne ich keine ausreichende Länge für die Eingaben und möchte sie in einer Zeile lesbar halten (zu viel Leerzeichen vermeiden).
Sie können eine (versteckte) Leinwand und die measureText() Methode des Kontexts verwenden, um die Breite der Zeichenfolge zu erhalten.
BEARBEITEN:
Sieht schnell genug aus.
Wenn jQuery kein Problem ist, hier ist eine Demo, die ich auf jsFiddle zusammengestellt habe. Es verwendet eine Autoexpand.js -Datei, die das tut, was Sie wollen. Schau dir das letzte Beispiel in der Geige an.
Einige Besonderheiten:
.keyup und .keypress für die schnellste Antwort möglich. Ebenfalls in der jsFiddle enthalten sind Links zum Herunterladen einer Pastebin-Version der Fiddle, da jsFiddle Sandbox in IE8 bricht. Das heißt, es funktioniert auch in IE7!
Tags und Links javascript html css auto-update input