입력한 내용에 따라 크기가 변하는 input text

 

<input type="text" id="userId" size="16" maxlength="30" style="ime-mode:disabled;">

<script type="text/javascript">
var resizable = function(el, factor) {
	var unit = Number(factor) || 7.7;
	function resize() {
		el.style.width = ((el.value.length+1) * unit) + 'px'
	}
	var e = 'keyup,keypress,focus,blur,change'.split(',');
	for (var i in e)
		el.addEventListener(e[i],resize,false);
	resize();
}
resizable(document.getElementById('userId'), 10);
</script>