jQuery: una barra de progreso para mostrar el "relleno" de un área de texto

A menudo, los problemas parecen fáciles de resolver, demostrar el más difícil de lo esperado, y es que normalmente hay que perder la mitad de sacar a un día de trabajo vuelva a intentar más o sitios web de consultas menos ortodoxos y febril, desesperada por alguien que ya se ha enfrentado la problema.

Cuando un proyecto que tenía la necesidad de limitar el número de caracteres permitidos en un área de texto Pensé que resolverse en unos pocos minutos, no fue así, he encontrado varias soluciones en la red pero no me convincente hasta el final, así que decidí poner en práctica algo personalizado utilizando jQuery y excelente jQueryUI , en particular el componente de la progessbar paquete.

Recuperación de los archivos necesarios

Colleghiamoci a http://jqueryui.com/ y haga clic en el botón de "descarga de generación personalizada" en la parte superior derecha.
En la página siguiente, seleccione los componentes útiles, y uno de los widgets disponibles decidimos tomar sólo la barra de progreso.

Elegimos la plantilla de gráficos de la lista desplegable a la derecha y haga clic en "Descargar". Descomprimir el paquete que acaba de descargar y encontrar tres carpetas y un archivo en la raíz:

• carpeta css que contiene el tema, en nuestro caso el valor por defecto, ui-ligereza
• el desarrollo conjunto contiene ejemplos y documentación
• JS: contiene los dos archivos necesarios para ejecutar nuestra solución, jQuery y jQuery-ui-1.4.4.min.js 1.8.9.custom.min.js-
• index.html: una página que nos permite ver un ejemplo de tema / los widgets que hemos elegido

Para nuestro pequeño ejemplo se creará una estructura simple de la siguiente manera:

• carpeta descomprimida a jQueryUI (jquery-ui-1.8.9.custom)
• file.html paquete que contiene el área de texto
• file.js que contiene el código jQuery

Creamos nuestro archivo HTML, darle un nombre significativo (al que llamaremos mrw_jquery_txtcheck.html) e insertar en las inclusiones cabeza etiqueta necesaria: el vínculo con el tema de css y js jQuery y jQueryUI.

 href = "jquery-ui-1.8.9.custom/css/ui-lightness/jquery-ui-1.8.9.custom.css" <link rel="stylesheet" type="text/css" />







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"> </ script>







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"> </ script>

Agregue el área de texto en el cuerpo:

 



 <div <textarea name="limitedOne" id="limitedOne" style='width:250px;height:100px;'> </ textarea> </ div>

 

A continuación, insertar el div que contiene la barra de progreso y un marcador de posición para darle una idea de la cantidad de caracteres también son numéricas.

 <div style="height: id="progress" 20px;"> </ div>







 Disponible <span id="charCounter"> 255 </ span> caracteres. </ P>

Ahora podemos proceder a escribir el código JavaScript a un archivo separado / jQuery con las funciones necesarias, que entonces también se incluyen en la etiqueta de la cabeza, vamos a llamar check_textarea.js.
En primer lugar definir las variables básicas; caracteres permitidos y los que están disponibles tienen el mismo valor al principio:

 MAX_CHARS = 255;







 Restante = MAX_CHARS;

Luego definimos la función que controla y mejora la barra de progreso y de venta libre:

 checkTextareaLength función () {





  



 current_length == undefined var = $ ("# limitedOne"). val (). longitud?

 



 0: $ ("# limitedOne") Val () de longitud;..



  



 = Resto (MAX_CHARS - current_length);



	

  



 if (restante> 0) {

	

    



 $ ("# LimitedOne") ($("# LimitedOne val ") Val () substring (0, MAX_CHARS))...;



  



 Else {}



    



 $ ("# CharCounter") Html (restante).;



    



 var pv = Math.floor ((((MAX_CHARS-Otros) / MAX_CHARS) * 100));



    



 ProgressBar $ ('# Progreso') ('value', pv).;



  



 }







 }

Vamos a analizar el código: la primera línea en checkTextareaLength obtiene el valor actual del área de texto usando la función val () de jQuery, y luego contar el número de caracteres introducidos por lectura el atributo de longitud.
En la siguiente línea da el número de caracteres disponibles para la diferencia. En este punto hay dos posibilidades.

1. Resto de la variable es menor que cero (por ejemplo después de un copiar / pegar) el bloque si toma el valor de la caja de texto y lo limita a 255 caracteres con los nativos subcadena JavaScript

 



 $ ("# LimitedOne") ($("# LimitedOne val ") Val () substring (0, MAX_CHARS))...;

 

2. Restante es mayor que cero, de lo contrario bloque en el primer tramo se ha mejorado con el número de caracteres a la izquierda:

 



 $ ("# CharCounter") Html (restante).;

 

Entonces, la función calcula la relación entre el número máximo de caracteres disponibles y los que actualmente se incluyen, las rondas de la biblioteca de la función Math.floor resultado (abajo) con una precisión de:

 



 var pv = Math.floor ((((MAX_CHARS-Otros) / MAX_CHARS) * 100));

 

En este punto sólo podemos asignar el valor que se encuentra en la barra de progreso

 



 ProgressBar $ ('# Progreso') ('value', pv).;

 

Vamos a escribir el código que se ejecuta en el Preparado DOM.
Inicializamos el enlace progressbar y llevar a cabo los eventos que desea interceptar: la pulsación, el mouseout, y cambiar la imagen borrosa. Monitor de todos ellos para interceptar el caso de que el usuario debe utilizar el copiar / pegar.
Tenga en cuenta que la llamada a la función se pospone por unas pocas centésimas de segundo a través de la setTimeout función nativa así que asegúrate de tener siempre el valor en el momento oportuno, cuando el usuario ha terminado de escribir.

 $ (Function () {



  



 $ ("# Progreso") ProgressBar ().;



  



 $ ("# LimitedOne.") Bind ("pulsación cambio mouseout borroso ', function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>