textarea에 입력된 길이만큼 게이지로 표현

<script language="JavaScript">
<!--
function textCounter(field,counter,maxlimit,linecounter) {
var fieldWidth = parseInt(field.style.width);
var charcnt = field.value.length;

if(charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
} else {
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
setcolor(document.getElementById(counter),percentage,"background-color");
}
}

function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}

// 페이지 로드시 명령
textCounter(document.getElementById("maxcharfield"),"progressbar1",200);
//-->
</script>

<!--
textarea에서 onkeydown,onkeyup,onfocus의 명령의 설명

textCounter(this,1,2);

this : 현재 textarea의 name값과 같음
1 : 게이지가 보여질 부분의 id값
2 : textarea에 입력 가능한 최대 글자수

** textarea에서 가로크기는 꼭 style로 해야함 cols는 안됨..
//-->
<textarea style="width:300px" rows="5" name="maxcharfield" onKeyDown="textCounter(this,'progressbar1',200);" onKeyUp="textCounter(this,'progressbar1',200);" onFocus="textCounter(this,'progressbar1',200);">

</textarea>

<!-- 입력 길이를 표시하는 게이지 //-->
<div id="progressbar1" style="width:1px; height:2px; background-color:#DFDFFF;"></div><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>