Breite von INPUT abhängig von vorausgehendem Text anpassen

[Ale×]

Hallo,

zur Veranschaulichung erst mal ein Demo: http://mylittlehomepage.net/demos/input-width/

Was ich möchte ist, dass die beiden INPUT-Felder an der rechten Seite Bündig abschließen. In dem Beispiel berechne ich die Breite über http://de.selfhtml.org/javascript/objekte/all.htm#offset_width@title=offsetWidth. Wie man sieht, kommt das aber nur in etwa hin. Ich nehme an, das liegt an den Rahmen/Innenabständen des INPUTS. Hat jemand eine Idee, wie ich das genau hinbekomme? Vielleicht sogar ohne JS!?

Ale×

[Auge]

Hallo

zur Veranschaulichung erst mal ein Demo: http://mylittlehomepage.net/demos/input-width/

Was ich möchte ist, dass die beiden INPUT-Felder an der rechten Seite Bündig abschließen. In dem Beispiel berechne ich die Breite über http://de.selfhtml.org/javascript/objekte/all.htm#offset_width@title=offsetWidth. Wie man sieht, kommt das aber nur in etwa hin. Ich nehme an, das liegt an den Rahmen/Innenabständen des INPUTS. Hat jemand eine Idee, wie ich das genau hinbekomme?

Wenn ich den JavaScript-Schnipsel richtig interpretiere, ist deine Formel falsch.

<form>  
<div>  
  
<p><span id="url">http://example.com/</span><input id="page" type="text" name="page" value="" size="50" /></p>  
  
<p><input id="title" type="text" name="page" value="" size="50" /></p>  
  
</div>  
</form>  
  
<script type="text/javascript">[code lang=javascript]  
/* new_width = Breite #page - Breite #url */  
new_width = document.getElementById('page').offsetWidth - document.getElementById('url').offsetWidth;  
/* weise new_width dem Element #page zu */  
document.getElementById('page').style.width=new_width+'px';
~~~</script>[/code]  
  
Ich würde nach deiner Beschreibung erwarten, dass du das zweite Input (#title) so breit machen willst, wie #url und #page zusammen. Du weist die neue Breite (#page - #url anstatt #page + #url?) #page zu und nicht #title.  
  
Sollte sich nicht anbieten, die Breite des <p> zu messen, das #url und #page enthält und diese Breite #title zuzuweisen? Dabei bitte nicht vergessen, dass input ein <http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente@title=Inlineelement> ist, es also zum Blockelement gemacht werden muss, um eine Breitenzuweisung haben zu können und dass beide Eingabefelder (im Beispiel) den gleichen Namen haben.  
  

> Vielleicht sogar ohne JS!?  
  
Rechenoperationen sind erst in CSS3 enthalten (geplant), also momentan: nein.  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)

[Ale×]

Hallo Auge,

Sollte sich nicht anbieten, die Breite des <p> zu messen, das #url und #page enthält und diese Breite #title zuzuweisen?

Eigentlich würde ich gerne das erste Feld anpassen. Im Beispiel ist ja 400px der Standardwert für Textfelder (letztendlich kommen noch weitere Felder dazu). Nur wo der URL davor steht, soll angepasst werden.

Ale×

[Auge]

Hallo

Sollte sich nicht anbieten, die Breite des <p> zu messen, das #url und #page enthält und diese Breite #title zuzuweisen?

Eigentlich würde ich gerne das erste Feld anpassen. Im Beispiel ist ja 400px der Standardwert für Textfelder (letztendlich kommen noch weitere Felder dazu). Nur wo der URL davor steht, soll angepasst werden.

Ah ja, dann brauchst du als Maximalwert die Gesamtbreite abzüglich der der Texte. Ob die Maximalbreite die des umgebenden Elements (abzüglich margin, padding und border) ist oder die des längsten Eingabefeldes, ist wohl eine Einzelfallentscheidung beim konkreten Formularaufbau.

max - text = Breite input

Tschö, Auge

[Ale×]

max - text = Breite input

Ja, genau so habe ich es im Moment. Nur ist es eben, wie man sehen kann, nicht ganz exakt.

Ale×

[ChrisB]

Hi,

Dabei bitte nicht vergessen, dass input ein http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente@title=Inlineelement ist, es also zum Blockelement gemacht werden muss, um eine Breitenzuweisung haben zu können

Nein, INPUT ist ein *replaced* inline element, und für diese wirkt eine Breitenangabe auch so - analog zu bspw. IMG-Elementen.

MfG ChrisB