希望通りの横幅を持ったインプットボックスを作る

インプットボックスの横幅はsizeで指定することになっているが、ブラウザによって指定によって取られる横幅異なっており、それ以前に指定の単位が文字数なのか何なのか分からない。例えばsize=”1″と指定しても横幅は5文字程度が下限になっているようで思い通りにならない。
横幅を思い通りに指定するためにはstyle指定のwidthで、それもpx指定するしかない。
インプットボックスの横幅指定

従って、使う文字フォントの横幅サイズから合計ピクセル数を計算して指定すれば、希望の文字数文のインプットボックスを作ることが出来る。

<!DOCTYPE html>
<html lang="UTF-8">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>input情報の取得</title>
	<style>
		#wrapper{width: 380px;}
		dt{background: lightblue; padding:4px; margin-top:8px;}
		dd{margin:2px;}
	</style>
	<script type="text/javascript">
	function onbtnClick() {
          target = document.getElementById("anchor");
          val1 = document.getElementById("txt_val1").value;
          val2 = document.getElementById("txt_val2").value;
          target.innerHTML = "value1:" + val1 + " value2:" + val2;
        }
 
	</script>
</head>
<body>
	<div id="wrapper">
		<h1>elementの作成</h1>
		<dl>
			<dt>入力欄の横幅指定はpxのみ確実</dt>
			<dd><input type="text" id="txt_val1" size="4" style="width:10px;" maxLength="3">
			<input type="text" id="txt_val2" size="1" value="AB" maxLength="10">
			<input type="button" id="btn_disp" value="表示" onclick="onbtnClick();">
			</dd>
		</dl>
		<div id="anchor"></div>
	</div>
</body>
</html>

希望通りの横幅を持ったインプットボックスを作る

カテゴリー