jQuery: en statuslinje for at vise "fyld" af en textarea

Ofte problemer synes let at løse, bevise de mest vanskelige end forventet, og det er, at der typisk er at miste en halv dags arbejde extricating forsøge igen mere eller mindre ortodokse og febrilsk konsultationer hjemmesider, desperate for nogen, der allerede stod over problem.

Når et projekt, jeg havde behov for at begrænse det tilladte antal tegn i en textarea Jeg troede jeg løst på et par minutter, det var ikke det, jeg fandt flere løsninger på nettet, men ingen overbevisende mig til ende, så jeg besluttede at gennemføre noget brugerdefineret hjælp jQuery og fremragende jQueryUI , især den del af pakken progessbar.

Inddrivelse af nødvendige filer

Colleghiamoci til http://jqueryui.com/ og klik på knappen "Download brugerdefinerede Byg" øverst til højre.
På næste side vælger nyttige komponenter, og en af de tilgængelige widgets vi beslutter at tage kun ProgressBar.

Vi vælger de grafiske skabelon fra drop-down listen til højre og klik på "Download". Unzip den pakke, du lige har downloadet og finde tre mapper, og en fil i roden:

• css mappe, der indeholder temaet, i vores tilfælde den standard, ui-lethed
• udvikling-bundle indeholder eksempler og dokumentation
• js: indeholder de to nødvendige filer til at køre vores løsning; jQuery og jQuery-UI-1.4.4.min.js-1.8.9.custom.min.js
• index.html: en side, der tillader os at se et eksempel på tema / de widgets, som vi har valgt

For vores lille eksempel vil skabe en enkel struktur som følger:

• dekomprimeret mappe til jQueryUI (jQuery-ui-1.8.9.custom)
• fil.html pakke indeholdende textarea
• file.js indeholder jQuery kode

Vi skaber vores HTML-fil, giv den et meningsfuldt navn (vi kalder mrw_jquery_txtcheck.html) og indsæt i hovedet tag optagelser er nødvendigt: linket til temaet css filer og js 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>

Tilføj textarea i kroppen:

 



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

 

Derefter sættes den div, der indeholder ProgressBar og en pladsholder for at give dig en idé om, hvor mange tegn er også numeriske.

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







 Tilgængelig <p> id="charCounter"> 255 </ span> tegn. </ P>

Nu kan vi gå videre til at skrive koden til en separat fil JavaScript / jQuery med de nødvendige funktioner, som så også det i hovedet tag, vil vi kalde check_textarea.js.
Først og fremmest definere de grundlæggende variable, figurer tilladte, og dem har samme værdi ved begyndelsen:

 MAX_CHARS = 255;







 Resterende = MAX_CHARS;

Så kan vi definere funktionen, der styrer og forbedrer ProgressBar og tæller:

 checkTextareaLength function () {





  



 current_length == undefined var = $ ("# limitedOne"). val (). længden?

 



 0: $ ("# limitedOne") Val () Længde;..



  



 Resterende = (MAX_CHARS - current_length);



	

  



 if (Resterende> 0) {

	

    



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



  



 Else {}



    



 $ ("# CharCounter") html (resterende).



    



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



    



 . $ ('# Progress') ProgressBar ('værdi', PV);



  



 }







 }

Lad os analysere koden: den første linje i checkTextareaLength får den aktuelle værdi af textarea bruge funktionen Val () jQuery, og derefter tælle antallet af tegn indtastes ved at læse længden attribut.
På næste linje viser antallet af tilgængelige tegn til forskel. På dette tidspunkt er der 2 muligheder.

1. Resterende variablen er mindre end nul (fx efter en copy / paste) den, hvis blokken opfanger værdien af textarea og begrænsninger det til 255 tegn ved hjælp af indfødte JavaScript substring

 



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

 

2. Resterende er større end nul, ellers blok i den første span er forbedret med det antal resterende tegn:

 



 $ ("# CharCounter") html (resterende).

 

Så den funktion beregner forholdet mellem det maksimale antal tegn til rådighed, og dem, der nu indgår, biblioteksfunktionen runder resultatet Math.floor (ned) til den nærmeste:

 



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

 

På dette punkt kan vi kun tildele den værdi, der findes i ProgressBar

 



 . $ ('# Progress') ProgressBar ('værdi', PV);

 

Lad os skrive den kode, der udføres på DOM-Ready.
Vi initialisere ProgressBar binder og udføre de begivenheder, du ønsker at opsnappe: de tastetryk, den mouseout, ændre og sløring. Overvåge dem alle til at opfange det tilfælde, at brugeren skal bruge copy / paste.
Bemærk, at funktionen opkaldet er udskudt med nogle få hundrededele af et sekund gennem de indfødte funktionen setTimeout så sørg for altid at have den værdi på et passende tidspunkt, når brugeren er færdig med at skrive.

 $ (Function () {



  



 $ ("# Progress") ProgressBar ().



  



 $ ("# LimitedOne.") Bind ("tastetryk ændre mouseout blur", function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>