Katharina: Input Breite an Breite des Textinhalts anpassen

Hallo,

ich habe ein input, in dem der Nutzer Text eingeben / löschen kann. Nun möchte ich, dass sich die Breite dieses Inputs an die eigegebene Textbreite anpasst (d.h. hat der Nutzer 'Hallo' eingegeben, dann ist das input breiter, als wenn er 'H' eingegeben hat).

Das Ganze könnte man mit Javascript lösen (Buchstaben zählen und mit Buchstabenbreite multiplizieren). Allerdings müsste man das Javascript anpassen, wenn sich z.B. die Schriftart ändert. Daher würde ich es gerne anders lösen.

Gibt es eine andere (elegantere) Möglichkeit mit CSS oder Javascript, die Breite des Inputs an die Textlänge anzupassen?

Danke für Eure Hilfe,

Katharina

P.S. auf netvibes.com könnt Ihr Euch bei dem Seitennamen die Variante mit Buchstaben zählen anschauen, die ich nicht so gerne nutzen würde.

  1. hi,

    Das Ganze könnte man mit Javascript lösen (Buchstaben zählen und mit Buchstabenbreite multiplizieren). Allerdings müsste man das Javascript anpassen, wenn sich z.B. die Schriftart ändert. Daher würde ich es gerne anders lösen.

    Dann musst du die Breite des Inhaltes "messen".
    Wird im Inputfeld direkt vermutlich nicht gehen - also den Inhalt bei jeder Änderung in ein anderes Element (inline; gewünscht auch versteckt; mit absolut identischer Formatierung was die Schrift-Einstellungen betrifft) übertragen, dessen Breite (offsetWidth) ermitteln, und Breite des Inputfeldes über style wieder setzen.
    Ggf. noch dafür sorgen, dass der Inhalt im "Messelement" nicht umgebrochen werden kann, denn einzeilige Text-Eingabefelder kennen auch keinen Umbruch.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }