Visualización del porcentaje del límite de entrada de caracteres CSS+JS

<tipo de estilo="texto/css">

.progreso{
ancho: 1px;
altura: 14px;
color: blanco;
tamaño de fuente: 12px;
desbordamiento: oculto;
color de fondo: azul marino;
relleno-izquierda: 5px;
}

</style>

<script type="text/JavaScript">

function textCounter(campo,contador,maxlimit,linecounter) {
// ancho del texto//
var fieldWidth = parseInt(field.offsetWidth);//El método parseInt devuelve el número entero convertido de la cadena. Convierte una cadena a un número entero.
//obj.offsetWidth se refiere al ancho absoluto del control obj en sí, excluyendo la parte que no se muestra debido al desbordamiento, es decir, el ancho que realmente ocupa, entero, unidad de píxel
var charcnt = field.value.length

// recorta el texto extra
si (charcnt > límite máximo) {
campo.valor = campo.valor.subcadena(0, límite máximo);
}

demás {
// porcentaje de la barra de progreso
porcentaje var = parseInt(100 - ((maxlimit - charcnt) * 100)/maxlimit);
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Perdido: "+porcentaje+"%"
// corrección de color en estilo desde CCFFF -> CC0000
setcolor(document.getElementById(contador),porcentaje,"color de fondo");
}
}

función setcolor(obj,porcentaje,prop){
obj.style[prop] = "rgb(80%,"+(100-porcentaje)+"%,"+(100-porcentaje)+"%)";
}

</script>

<p>Límite: 120 bytes</P>
<form>

<textarea filas="5" cols="40" nombre="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"),"barra de progreso1",120)</script>

</form>