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.
