javascriptでスピンボタン - SO NOTE そうのて (；^ω^)

なんとなくjavascriptでスピンボタンを作ってみた。
用途的には一定の範囲内の数値を選ばせたい時とかに使う事になるんだろうけど、
ぶっちゃけselectやinput[type=text]で充分代用可能なんで、
少し変わったインターフェースにしたい時くらいでしょうか。(；^ω^)

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div#formbox input#txt1 {
	width: 30px;
	text-align: right;
}
div#formbox button {
	width: 30px;
	font-weight: bold;
}
</style>


<script type="text/javascript">

var lowerlimit = 1;
var upperlimit = 10;

function changeValue(evt) {
	var tgt = evt.srcElement ? evt.srcElement: evt.target;
	var tb = document.forms['HOGE'].elements['txt1'];
	var n = parseInt(tb.value);
	if (tgt.nodeName == 'BUTTON') {
		if (tgt.id == 'dec' && n > lowerlimit) {
			tb.value = n - 1;
		} else if (tgt.id == 'inc' && n < upperlimit) {
			tb.value = n + 1;
		}
	}

}
window.onload = function() {
	var box = document.getElementById('formbox');
	var tb = document.forms['HOGE'].elements['txt1'];
	tb.setAttribute('value', Math.ceil(upperlimit / 2));
	if (document.addEventListener) {
		//Firefox, Opera, Safari
		box.addEventListener('click', changeValue, false);
	} else if (document.attachEvent) {
		//IE
		box.attachEvent('onclick', changeValue);
	}
}
</script>

<title>JavaScript Spin  Button</title>
</head>
<body>
<div id="formbox">
	<form id="HOGE" action="#">
		<p>
			<input type="text" id="txt1" readonly>
			<button id="dec">&laquo;</button>
			<button id="inc">&raquo;</button>
		</p>
	</form>
</div>
</body>
</html>