Artículos
Javascript

Contar caracteres on-line

25/Mar/2008

Vas a mandar un SMS y solo puedes enviar 150 caracteres. La aplicación a ofrecer al usuario nos va mostrando el número de caracteres que van escritos. Es una ayuda del interface de usuario, haciéndole más usable.

Este simple interface le podemos lograr mediante un área de texto y un poco de código Javascript.

La solución técnica es muy sencilla, ya que el número de caracteres nos la da la longitud del área de texto.

textoArea = document.getElementById("area_texto").value;
numeroCaracteres = textoArea.length;

Quizás el principal problema sea saber cada cuanto debemos de realizar el calculo del tamaño del área de texto. Una de las opciones sería realizar el calculo cada vez que el usuario pulse una tecla. Si bien, puede suponer una cuenta demasiado excesiva de los caracteres y habría que intentar hacerlo más espaciado, si bien, sin perder la cuenta.

Otra opción, y la que utilizamos, el utilizar un temporizador, el cual lanzaremos cada un tiempo determinado. Para ello nos apoyamos en el método setTimeOut(funcion,tiempoEnMilisegundos). Donde el parámetro función será la que calcule el tamaño del área y actualice el número de caracteres y el tiempoEnMilisegundos será, pues eso, cada cuantos milisegundos lanzamos el método. Aquí podemos jugar con los valores para ajustarlo. Para empezar vamos a utilizar 300ms.

La primera vez que lancemos el timer será al cargarse la página:


En posteriores ocasiones será cuando finalice de ejecutarse nuestro método WordCountOnLine:

function WordCountOnLine() {

  textoArea = document.getElementById("area_texto").value;

  // El numero de caracteres es su longitud
  numeroCaracteres = textoArea.length;
 
  document.getElementById("caracteres").value = numeroCaracteres;   
  setTimeout("WordCountOnLine();",300);
}

Este ejemplo se puede incrementar para que se cuenten las palabras introducidas por el usuario. Para ello es recomendable leerse el artículo Contar caracteres y palabras en JavaScript. Si bien, el código para descargar ya lleva incluida esta mejora. Así puedes ver lo simple que es hacerlo.

Código Fuente

Descárgate el código fuente de Contar caracteres on-line
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
3 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios