Word input limit percentage display Css+js

<style type= "Text/css" >
. progress{
width:1px;
height:14px;
Color:white;
font-size:12px;
Overflow:hidden;
Background-color:navy;
padding-left:5px;
}
</style>
<script type= "Text/javascript" >
function Textcounter (field,counter,maxlimit,linecounter) {
Text width//
var fieldwidth = parseint (field.offsetwidth); The//parseint method returns an integer converted from a string. Converts a string to an integral type.
Obj.offsetwidth refers to the absolute width of the obj control itself, excluding parts that are not displayed because of overflow, that is, its actual occupied width, integral type, Unit pixel
var charcnt = field.value.length;
Trim the extra text
if (charcnt > Maxlimit) {
Field.value = field.value.substring (0, Maxlimit);
}
else {
progress bar Percentage
var percentage = parseint ((maxlimit-charcnt) */maxlimit);
document.getElementById (counter). Style.width = parseint ((fieldwidth*percentage)/100) + "px";
document.getElementById (counter). Innerhtml= "lost:" +percentage+ "%"
Color correction on style from Ccfff-> CC0000
SetColor (document.getElementById (counter), percentage, "Background-color");
}
}
function SetColor (obj,percentage,prop) {
Obj.style[prop] = "RGB (80%," + (100-percentage) + "%," + (100-percentage) + "%)";
}
</script>
<p> Restrictions: 120 bytes </P>
<form>
<textarea rows= "5" cols= "Name=" Maxcharfield "id=" Maxcharfield "
Onkeydown= "Textcounter (This, ' progressbar1 ', 120)"
Onkeyup= "Textcounter (This, ' progressbar1 ', 120)"
Onfocus= "Textcounter (This, ' progressbar1 ',)" ></textarea><br/>
<div id= "progressbar1" class= "Progress" ></div>
<script>textcounter (document.getElementById ("Maxcharfield"), "progressbar1", </script>
</form>