jQuery: en fremdriftsindikator for å vise "fylling" av et tekstfelt

Ofte problemer som synes enkle å løse, bevise mer utfordrende enn forventet, og det er at vanligvis er det å miste en halv dags arbeid extricating retry mer eller mindre ortodokse og febrilsk konsultasjoner nettsteder, desperate etter noen som allerede har møtt den problem.

Når et prosjekt jeg hadde behov for å begrense antall tegn en textarea jeg trodde jeg løst på noen få minutter, var det ikke så, fant jeg flere løsninger på nettet, men ingen overbeviste meg til slutt, så jeg bestemte meg for å implementere noe tilpasset hjelp jQuery og den store jQueryUI , spesielt komponenten av pakken progessbar.

Gjenoppretting av filer som trengs

Colleghiamoci til http://jqueryui.com/ og klikk på knappen "Custom Build Downloads" øverst til høyre.
På neste side velger nyttige komponenter, og en av widgets tilgjengelig vi besluttet å ta bare den ProgressBar.

Vi velger den grafiske malen fra dropdown menyen på høyre og klikk på "Download". Pakk ut pakken du nettopp lastet ned, og det er tre mapper og en fil i roten:

• css inneholder mappen av temaet valgt, i vårt tilfelle standard UI-letthet
• utvikling-bundle inneholder eksempler og dokumentasjon
• JS: Det inneholder to filer som trengs for å kjøre vår løsning, jQuery og jquery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: en side som lar oss se et eksempel på tema / ting vi valgte

For vårt lille eksempel vil vi skape en enkel struktur som følger:

• dekomprimeres mappen jQueryUI (jquery-ui-1.8.9.custom)
• fil.html pakke inneholder textarea
• file.js inneholder jQuery-kode

Vi skaper vår html-fil, gi den et meningsfullt navn (vi kaller mrw_jquery_txtcheck.html) og sett i hodet tag inclusions nødvendig: linker til temaet css og js filer for jQuery og jQueryUI.

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







 <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>

I kroppen legge til tekstfelt:

 



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

 

Deretter kan du ringe opp div som skal inneholde ProgressBar og en plassholder for å gi deg en idé om hvor mange tegn er også numerisk.

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







 Tilgjengelig <p> <span id="charCounter"> 255 </ span> tegn. </ P>

Nå kan vi gå videre til en egen fil for å skrive Javascript / jQuery med nødvendige funksjoner, som da også inkludere den i hodet tag, vil vi kaller check_textarea.js.
Først definere de grunnleggende variablene, det tillatte karakterer og dem som er tilgjengelige har samme verdi ved starten:

 MAX_CHARS = 255;







 Gjenstående = MAX_CHARS;

Deretter definerer vi funksjonen som styrer og forbedrer ProgressBar og counter:

 checkTextareaLength funksjon () {





  



 current_length == udefinert var = $ ("# limitedOne.") val (). lengde?

 



 0: $ ("# limitedOne.") Val () Lengde;.



  



 Gjenstående = (MAX_CHARS - current_length);



	

  



 if (Gjenværende <0) {

	

    



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



  



 Else {}



    



 $ ("# CharCounter") Html (gjenværende).;



    



 var pv = Math.floor ((((MAX_CHARS-Gjenværende) / MAX_CHARS) * 100));



    



 . $ ('# Progress') ProgressBar ('verdi', PV);



  



 }







 }

Vi analyserer koden: den første linjen i checkTextareaLength får nåverdien av textarea ved val funksjon () jQuery, deretter telle antall tegn skrevet inn ved å lese lengden attributtet.
På neste linje blir antall tegn tilgjengelig for forskjellen. På dette punktet er det to muligheter.

1. Resterende variable er mindre enn null (for eksempel etter en kopi / lim), den hvis blokken samler verdien av textarea og begrenser det til 255 tegn ved hjelp av innfødte JavaScript delstreng

 



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

 

2. Resterende er større enn null, ellers blokk i første span er forbedret med antall tegn som gjenstår:

 



 $ ("# CharCounter") Html (gjenværende).;

 

Deretter beregner forholdet mellom maksimalt antall tegn tilgjengelig, og de ​​som i dag følger, biblioteket funksjon Math.floor runder resultatet (ned) til nærmeste:

 



 var pv = Math.floor ((((MAX_CHARS-Gjenværende) / MAX_CHARS) * 100));

 

På dette punktet kan vi bare tildele verdien funnet i ProgressBar

 



 . $ ('# Progress') ProgressBar ('verdi', PV);

 

La oss skrive koden som kjøres på DOM Ready.
Vi initialiserer ProgressBar og utfører binder du ønsker å fange opp hendelser: den tastetrykk, de mouseout, og endre uskarphet. Monitor dem alle til fange hendelsen at brukeren bør bruke kopier / lim inn.
Merk at funksjonen samtalen er forsinket med noen få hundredeler av et sekund gjennom innfødte funksjon setTimeout så pass på å alltid ha verdien på riktig tidspunkt, når brukeren er ferdig å skrive.

 $ (Function () {



  



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



  



 $ ("# LimitedOne.") Bind ("mouseout endre blur tastetrykk", funksjon () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>