Script en Javascript que realiza la cuenta de los caracteres que se han escrito en un campo de formulario textarea, al mismo tiempo que se están escribiendo.

El diseño de este script fue motivado por la necesidad de hacer la típica caja para enviar mensajes SMS desde Internet. El tamaño máximo de un mensaje SMS de móvil es de 160 caracteres, con lo que es muy útil que la propia página te informe sobre el número de caracteres que se llevan escritos en el mensaje, para que el interesado no se pase del máximo permitido.

El formulario

La página presentará un formulario con dos campos. El primero con el textarea donde el usuario escribirá el mensaje y el segundo, un campo de texto donde mostraremos en todo momento los caracteres escritos.

El único detalle a tener en cuenta relacionado con Javascript es el par de eventos que tenemos definidos dentro del campo textarea, que sirven para llamar a la función que realiza la cuenta de los caracteres en el momento que el usuario presiona o suelta las teclas. Concretamente se utiliza el evento onKeyDown para definir las acciones a realizar cuando se aprete la tecla y onKeyUp, para definir acciones a ejecutar cuando se suelta la tecla apretada.

   

   

   

Texto:    

Caracteres:

El script que cuenta caracteres

Con el formulario y el par de eventos introducidos tenemos todo lo necesario para que se cuenten -y recuenten- los caracteres cada vez que el visitante, situado sobre el textarea, pulsa sobre las teclas, es decir, cada vez que se escribe texto en el textarea. Ahora simplemente nos queda definir la función que se encarga de realizar la cuenta propiamente dicha y situarla en el otro campo de texto del formulario.

Puede que a muchos haya sorprendido la sencillez del script, pero es que no hace falta más.

La propiedad value del textarea contiene el texto escrito y a su vez, la propiedad length guarda el número de caracteres de dicho texto. Así, document.forms[0].texto.value.length equivale al número de caracteres introducidos dentro del textarea. Este valor se asigna al contenido del campo de texto del formulario donde guardamos el número de caracteres, mediante la propiedad value del campo: document.forms[0].caracteres.value.