Contador de caracteres para formulario web

Pequeño código javascript para contar los caracteres introducidos por el usuario en un formulario web restringiendo que se escriban mas caracteres de lo indicado

Este JavaScript es bastante sencillo pero potente , obligando al usuario a usar la cantidad de caracteres deseada por el programador..

Ahí les dejo un demo para que vean como funciona…..

Para comenzar debemos colocar dentro de nuestro <head> y </head> el siguiente código para activar el JavaScript :

<script language="JavaScript">
function timeAfterTime()
{
var ID=window.setInterval('CheckStr()',100)
}
function CheckStr(userInput)
{
StrLen = window.document.sms_input.msg.value.length;

if (StrLen > 500 )
{
window.document.sms_input.msg.value = 
window.document.sms_input.msg.value.substring(0,500);
StrLeft = 0;
}

else
{
StrLeft = 500 - StrLen;
}

document.sms_input.Len.value = StrLeft;
}

var twice = false
function abdiepost()
{
if (twice == false){
twice=true;
return true;
}
else {
return false;
}
}


function InitmsgCount()
{
var fm = document.sms_input;
var PseudoLength = fm.Len.value;
var msgLength = fm.msg.value.length  + signature.length + 2 + PseudoLength;

var charsleft = msgMaxLength - msgLength;


}

function AddtextToTextarea( theSelect )
{
var texte = theSelect.options[theSelect.selectedIndex].value;
var FM = document.sms_input;
var TA = FM.msg;
var charsleft = msgMaxLength - TA.value.length  - signature.length - 2;
var addedText;

if( texte.length > charsleft )
addedText = texte.substr( 0, charsleft );

else
addedText = texte;
TA.value += addedText;
InitmsgCount();
theSelect.selectedIndex = 0;

}
function AddgraphicToTextarea( graph )
{
var texte = graph;
var FM = document.sms_input;
var TA = FM.msg;
var charsleft = msgMaxLength - TA.value.length  - signature.length - 2;
var addedText;

addedText = texte;

TA.value += addedText;
InitmsgCount();
graph.selectedIndex = 0;

}

function update_count_keyPress(e)
{
var key;
if( e.keyCode )
key = e.keyCode;
else
key = e.which;
var fm = document.sms_input;
var PseudoLength = fm.from.value.length;
var msgLength = fm.msg.value.length + PseudoLength + signature.length + 3;

if( key == 8 ) 
if( msgLength >= PseudoLength + signature.length + 4 )
msgLength -= 2;
else
msgLength --;
if( msgLength-1 >= msgMaxLength && key != 8 && key != 46 )
return false;

}
</script>

El archivo donde vamos a presentar nuestro formulario lo creamos y utilizamos las propiedades a utilizar :

   <FORM NAME="sms_input" METHOD="GET"onSubmit="return abdiepost()">
	<div>
    	<label for="nombre">Nombre :</label> 
    	<input type="text" name="nombre" />
    </div>
	<div>
    	<label for="website">Website :</label> 
    	<input type="text" name="website" />
    </div>
	<div>
    	<label for="caracteres">Caracteres :</label> 
<font size="-1"><INPUT NAME=Len VALUE=500 SIZE=5  readonly="true" /></font>
    </div>
	<div>
	
<TEXTAREA NAME="msg" ROWS="8" COLS="50" name="msg" MAXLENGTH="500" 
wrap="physical" onChange="CheckStr(this)" onFocus="CheckStr(this)" 
onBlur="CheckStr(this)" onKeyDown="CheckStr(this)" onKeyUp="CheckStr(this)" 
STYLE="overflow:auto"></TEXTAREA></FORM >

Como se darán cuenta en el </TEXTAREA> es donde vamos a utilizar nuestras propiedades declaradas en el JavaScript

El estilo queda a tu gusto ya que ese no es el foco del tutorial suerte..

Demostración