文字入力制限パーセント表示 CSS+JS

<style type="text/css">

.progress{
幅: 1px;
高さ: 14px;
色: 白;
フォントサイズ: 12px;
オーバーフロー: 非表示;
背景色: ネイビー;
パディング左: 5px;
}

</style>

<script type="text/JavaScript">

function textCounter(field,counter,maxlimit,linecounter) {
// 文字幅//
var fieldWidth = parseInt(field.offsetWidth);//parseInt メソッドは、文字列から変換された整数を返します。文字列を整数に変換します。
//obj.offsetWidth は、オーバーフローにより表示されない部分を除いた、obj コントロール自体の絶対幅、つまり実際に占める幅を指します。整数、単位ピクセル
var charcnt = field.value.length;

// 余分なテキストをトリミングします。
if (charcnt > maxlimit) {
フィールド値 = フィールド値.部分文字列(0, 最大値);
}

それ以外 {
// プログレスバーのパーセンテージ
var パーセンテージ = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="紛失: "+percentage+"%"
// CCFFF -> CC0000 のスタイルの色補正
setcolor(document.getElementById(counter),percentage,"背景色");
}
関数

setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-パーセント)+"%,"+(100-パーセント)+"%)";
}

</script>

<p>制限: 120 バイト</P>
<form>

<textarea rows="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>