Exibição percentual do limite de entrada de caracteres CSS + JS

<style type="text/css">

.progress{
largura: 1px;
altura: 14px;
cor: branco;
tamanho da fonte: 12px;
estouro: oculto;
cor de fundo: marinho;
preenchimento à esquerda: 5px;
}

</style>

<script type="text/JavaScript">

function textCounter(field,counter,maxlimit,linecounter) {
//largura do texto//
var fieldWidth = parseInt(field.offsetWidth); //O método parseInt retorna o inteiro convertido da string. Converta string em inteiro.
//obj.offsetWidth refere-se à largura absoluta do próprio controle obj, excluindo a parte não exibida devido ao overflow, ou seja, a largura que ele realmente ocupa, número inteiro, pixel unitário
var charcnt = field.value.length;

// apara o texto extra
if (charcnt > maxlimit) {
campo.valor = campo.valor.substring(0, limite máximo);
}

outro {
//porcentagem da barra de progresso
var porcentagem = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Perdido: "+percentage+"%"
// correção de cor no estilo de CCFFF -> CC0000
setcolor(document.getElementById(contador),porcentagem,"cor de fundo");
}
}

function setcolor(obj,porcentagem,prop){
obj.style[prop] = "rgb(80%,"+(100 porcentagem)+"%,"+(100 porcentagem)+"%)";
}

</script>

<p>Limite: 120 bytes</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>