문자 입력 제한 비율 표시 CSS+JS

<style type="text/css">

.progress{
너비: 1px;
높이: 14px;
색상: 흰색;
글꼴 크기: 12px;
오버플로: 숨김;
배경색: 네이비;
왼쪽 패딩: 5px;
}

</style>

<script type="text/JavaScript">

함수 textCounter(field,counter,maxlimit,linecounter) {
// 텍스트 너비//
var fieldWidth = parsInt(field.offsetWidth);//parseInt 메서드는 문자열에서 변환된 정수를 반환합니다. 문자열을 정수로 변환합니다.
//obj.offsetWidth는 오버플로로 인해 표시되지 않는 부분을 제외한 obj 컨트롤 자체의 절대 너비, 즉 실제로 차지하는 너비, 정수, 단위 픽셀을 의미합니다.
var charcnt = field.value.length;

// 추가 텍스트 자르기
if (문자> 최대 제한) {
field.value = field.value.substring(0, maxlimit);
}

또 다른 {
// 진행률 표시줄 백분율
var 백분율 = parsInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width =parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="분실: "+백분율+"%"
// CCFFF -> CC0000 스타일의 색상 보정
setcolor(document.getElementById(counter),percentage,"배경색");
}
}

함수 setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-퍼센트)+"%,"+(100-퍼센트)+"%)";
}

</script>

<p>한도: 120바이트</P>
<form>

<textarea 행="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',120)"
onKeyUp="textCounter(this,'progressbar1',120)"
onFocus="textCounter(this,'progressbar1',120)" ></textarea><br />

<div id="progressbar1" class="progress"></div>

<script>textCounter(document.getElementById(" maxcharfield"),"progressbar1",120)</script>

</form>