<style type="text/css">
.kemajuan{
lebar: 1 piksel;
tinggi: 14 piksel;
warna: putih;
ukuran font: 12px;
meluap: tersembunyi;
warna latar: biru tua;
padding-kiri: 5px;
}
</style>
<script type="text/JavaScript">
fungsi textCounter(field,counter,maxlimit,linecounter) {
// lebar teks //
var fieldWidth = parseInt(field.offsetWidth);//Metode parseInt mengembalikan bilangan bulat yang dikonversi dari string. Ubah string menjadi bilangan bulat.
//obj.offsetWidth mengacu pada lebar absolut dari kontrol obj itu sendiri, tidak termasuk bagian yang tidak ditampilkan karena overflow, yaitu, lebar sebenarnya yang ditempati, bilangan bulat, satuan piksel
var charcnt = field.value.length;
// potong teks tambahan
if (karakter > batas maksimal) {
field.value = field.value.substring(0, batas maksimal);
}
kalau tidak {
// persentase bilah kemajuan
var persentase = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Hilang: "+persentase+"%"
// koreksi warna pada gaya dari CCFFF -> CC0000
setcolor(document.getElementById(counter),persentase,"warna latar");
}
}
fungsi setcolor(obj,persentase,prop){
obj.style[prop] = "rgb(80%,"+(100 persen)+"%,"+(100 persen)+"%)";
}
</script>
<p>Batas: 120 byte</P>
<form>
<textarea row = "5" cols = "40" name = "maxcharfield" id = "maxcharfield"
onKeyDown="textCounter(ini,'progressbar1',120)"
onKeyUp="textCounter(ini,'progressbar1',120)"
onFocus="textCounter(ini,'progressbar1',120)" ></textarea><br />
<div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById(" maxcharfield"),"progressbar1",120)</script>
</form>