feed twitter facebook LinkedIn facebook

JavaScript » Contar caracteres on-line

marzo 25, 2008 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

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.

  1. textoArea = document.getElementById("area_texto").value;
  2. 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:

  1. <body onLoad="WordCountOnLine();">

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

  1. function WordCountOnLine() {
  2.  
  3. textoArea = document.getElementById("area_texto").value;
  4.  
  5. // El numero de caracteres es su longitud
  6. numeroCaracteres = textoArea.length;
  7.  
  8. document.getElementById("caracteres").value = numeroCaracteres;
  9. setTimeout("WordCountOnLine();",300);
  10. }

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.

Visualizar el ejemplo
|- Descargar el código
|- Descargar del SVN
|- Reportar un error del código

tags: , ,

Artículos relacionados:

2 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Matias
    octubre 19, 2008 #

    Buenos dias, estoy intentando usar este codigo en mi sitio, necesitaria adaptarlo para que al ingresarle un parametro a la funcion me cuente en diferentes campos algo asi…

    function WordCountOnLine(‘area’);

    pero no logro hacerlo andar.. mi sitio usa include en php y por lo tanto pongo el script en el index.php en el tag y tambien el onload en no se si sera este el motivo, desde ya muchas gracias!

  2. fds
    marzo 23, 2009 #

    SELECT * FROM persoas WHERE Nif NOT IN
    ( select Nif from relacion where NumAccion=’04′ And NumContrato=’F20070187′)
    And Nif NOT IN
    ( SELECT Nif FROM modents, relacion
    WHERE NumContrato=’F20070187′ AND modents.NumAccion=relacion.NumAccion
    AND modents.NumGrupo=relacion.NumGrupo
    GROUP BY Nif
    HAVING (Sum(NumHorasPres) > (270 -
    (Select NumHorasPres FROM modents
    WHERE NumAccion=’04′ AND NumGrupo=’55′))
    )
    SELECT * FROM persoas WHERE Nif IN
    ( SELECT Nif FROM relacion
    WHERE relacion.NumAccion=’04′
    AND relacion.NumGrupo=’55′
    AND relacion.NumContrato=’F20070187′)

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*