Contador de caracteres en un Textarea

En Sentido Web publican esta entrada en la cual muestran el código con el que por medio de Javascript controlan el número de teclas pulsadas, con el fin de limitar el número de caracteres de entrada. Esto es útil sobre todo cuando la información que se está escribiendo se va directo a un campo de la base de datos, que esté limitado a un tamaño, y así hacer una buena validación de entrada a la base de datos. Bien, pues el ejemplo no impide que se continue escribiendo, pero si te indica con una barra en color rojo cuando te pasaste, y así permitirte reducir el texto deseado a fin e dejarlo en la longitud deseada. Luis Sacristán lo explica a detalle.

Lo que procedemos hacer acontinuación tomando como base el ejemplo de Luis Sacristán, y para todos aquellos que como yo ya no saben escribir Javascript sino MooTools, es Mootoorizar el ejemplo de la siguiente manera:

HTML____________________________________

HTML:
  1. <div class="contenedor">
  2.     <textarea id="txtArea"></textarea>
  3.     <div id="progreso">&nbsp;</div>
  4. </div>

JAVASCRIPT_______________________________

JavaScript:
  1. var Site={
  2.         max:250,
  3.         w:300,
  4.         start:function(){
  5.             var args=[$('progreso'), textarea=$('txtArea')];
  6.             textarea.addEvent('keyup',Site.progreso_tecla.pass(args)).fireEvent("keyup", args);
  7.         },
  8.         progreso_tecla:function(progreso,obj){
  9.               progreso.setStyles(
  10.                 (obj.value.length <Site.max)?
  11.                     {backgroundPosition:"-"+(Site.w-((Site.w*obj.value.length.toInt())/Site.max).toInt())+"px 0px", backgroundColor:'#FFF',backgroundImage:'url(textarea.png)',color:'#000'}:
  12.                     {backgroundColor:'#C00',backgroundImage:'url()',color:'#fff'}
  13.               ).setHTML("("+obj.value.length+" / "+Site.max+")");
  14.         }
  15.     }
  16.     window.addEvent('domready',Site.start);

El ejemplo corriendo aqui.

2 Comments so far »

  1. Luis said,

    Wrote on June 21, 2007 @ 2:09 pm

    ¡Qué buena implementación!, es un placer ver que lo que haces sirve para algo.

    Gracias

  2. Eduardo said,

    Wrote on July 10, 2007 @ 2:07 am

    Hola que buena implementacion que lo has hecho con el querido mootools k versión es la 1.11 o la 1.10 de mootools, weno no se si podrás explicar mas detalladamente el código es que veo x ejemplo de usas .pass esto para k se usaba exactamente estaba leyendo un poco la documentación peor no me entero veo el ejemplo pero no se el uso exacto k se le da y el fireEvent también porque lo usas si puedes detallarlo el ejemplo por favor..
    I si solo si quisiera que tuviera un tope en las letras hasta 250 que te tendría que poner?? para k no sobre pase la cantidad,,
    Gracias por todo.. :D

Comment RSS · TrackBack URI

Leave a Comment

Name: (Required)

E-mail: (Required)

Website:

Comment:

últimos compilados

en el cajón

lo que no he podido escribir en twitter

los colegas