<input type='text' name='code' size='16' maxlength='12' value='AAAAAAAAAAAA'>
のようにmaxlengthで12を指定したテキストボックスに、12文字ちょうど入力した際、適切な横幅を得る(ボックス内がスクロールせず、文字列が全て見える)ためににはsizeの値をどのように算出すればよいでしょうか。「size=文字数」と書いているサイトは多いですが、12だとアウトですよね。よろしくお願いします。(ブラウザ依存ならIEが特に知りたいです)
これ完璧に合わせるのは難しいかも・・・。
デフォルトのフォント(WindowsならMS UI Gothicかな?)はプロポーショナルフォントと呼ばれる物で、文字によって幅が違います。
たとえば「i」を12個を並べても半分ぐらいしか埋まりません。
sizeの言う1文字の幅はi最短から最長までの中間値か平均値なので、「maxlength×3÷4=size」とすると大体改善されるんじゃないでしょうか?
すみません。。。計算式で書きたかったのはmax×4÷3です。。。
それもでだめっぽいですね。。。
多分半角文字だと「W」が一番幅を取ります。
MS UI Gothicで12文字表示するのに最適なサイズは"22"。
1文字あたりのsizeが1.8333....なので、size=max×1.8~9を適応すれば大丈夫そうです。
このサイズなら全角でも12文字入るようです。
なるほど、「W」を基準にするとよさそうですね
スタイルシートを利用するのは不可なのでしょうか?
<input type='text' name='code' size='16' maxlength='12' value='AAAAAAAAAAAA' style="width:200px;">
ピクセル単位で指定できます。
当然ですが、font-family、またfont-sizeの指定なども視野に入れないといけないと思います。
なるほど。
「zeの言う1文字の幅は最短から最長までの中間値か平均値」といっても、size=maxlengthだと「A」でもはみ出すので半角の中間値・平均値あたりでしょうかね。
「maxlength×3÷4=size」って減ってるじゃないデスか!「maxlength×4÷3=size」でも幅が足りないです・・・
半角「A」なら「maxlength×1.5=size」
全角「あ」なら「maxlength×2+1=size」
くらい?