mascodigo.com

<!-- incluir fichero con la funcion en JavaScript -->
<script src="./contarCaracteres.js" type="text/JavaScript"></script>
 
<!--
Campo al que contaremos los caracteres 
 
* Llamamos a la función con el evento "onKeyDown".
* Le pasamos como parametros:
	- el id del campo (this.id)
	- el id del div donde se mostrara el nº de caracteres actuales
	- el color que tendra el campo en caso de sobrepasar el máximo de caracteres
	- el máximo de caracteres permitidos.
 
-->
<input id="ejemplo" onkeydown="contarCaracteres(this.id, 'nCaracteres','#FF0000',10)" type="text" />
 
<!-- div donde mostraremos el numero de caracteres -->
Caracteres:<div id='nCaracteres'></div>

function contarCaracteres(campo, id,color,maximo)
{
	/**
	 * variable que contiene el div donde vamos a
	 * escribir y borrar.
	 */
	var div;
 
	/**
	 * variable que guardara el numero total de
	 * caracteres que tiene el campo que estamos
	 * contando.
	 */
	var cTotal;
 
	/**
	 * variable que creara el nodo de texto y el valor
	 * que mostraremos.
	 */
	var tmp;
 
	//Asignar div al div con el que trabajaremos
	div = document.getElementById(id);
 
	//Borrar el contenido del div
	while(div.hasChildNodes())
	{
		div.removeChild(div.lastChild);
	}
 
	//Obtener el número de caracteres del campo en cTotal.
	campo = document.getElementById(campo);
	cTotal = campo.value.length + 1;
 
	/**
	 * Añadirle el atributo maxlenght para evitar que se escriban
	 * mas caracteres de los indicados.
	 */
	campo.setAttribute("maxlength",maximo);
 
	/**
	 * Si se supera el máximo de caracteres permitidos ponemos el fondo
	 * del campo en rojo ó el color indicado.
	 */
	if(cTotal > maximo  ) {
		campo.style.backgroundColor = color;
	}  else {
		campo.style.backgroundColor = "#FFFFFF";
	}
 
	/**
	 * Escribimos el total de caracteres en el div indicado.
	 * Para hacer esto creamos un nodo de texto con el valor de
	 * cTotal. El nodo lo asignamos a tmp
	 */
	tmp = document.createTextNode(cTotal);
 
	//Añadimos el contenido de tmp al div indicado.
	div.appendChild(tmp);
}