jQuery: napredak bar pokazati "punjenje" u textarea

Često problemi se čine lako riješiti, dokazati najteže nego što se očekivalo, a to je da obično postoji izgubiti pola dana na poslu extricating ponovnog pokušaja više ili manje ortodoksnih i febrilna konzultacije web stranice, očajan za nekoga tko je već suočen problem.

Kada projekt sam potrebu da se ograničiti broj znakova dopušten u textarea mislio sam riješio u nekoliko minuta, nije bilo tako, našao sam nekoliko rješenja na netu, ali ne meni uvjerljivo do kraja, pa sam odlučio provesti nešto običaj koristeći jQuery i odličan jQueryUI , osobito komponenta paketa progessbar.

Oporavak datoteka potreban

Colleghiamoci na http://jqueryui.com/ i kliknite na gumb "Download običaj graditi" u gornjem desnom.
Na sljedećoj stranici odaberite korisne komponente, a jedan od dostupnih widgeta odlučili smo da se samo progressbar.

Mi izabrati grafički predložak iz padajućeg popisa na desnoj strani i kliknite na "Download". Raspakirajte paket koji ste upravo preuzeli i naći tri mape i datoteke u root:

• css mapu koja sadrži temu, u našem slučaju zadani, UI-lakoće
• razvojno-paket sadrži primjere i dokumentaciju
• JS: sadrži dvije datoteke potrebne za pokretanje naše rješenje, jQuery i jQuery UI--1.4.4.min.js-1.8.9.custom.min.js
• index.html: stranicu koja omogućuje nam da biste vidjeli primjer tematskih / naprava koje smo odabrali

Za naš mali primjer će stvoriti jednostavne strukture kako slijedi:

• dekomprimiranu mapu za jQueryUI (jQuery UI--1.8.9.custom)
• datoteka.html paket sadrži textarea
• file.js sadrže jQuery kod

Mi stvaramo naš HTML datoteke, dati smislen naziv (zvat ćemo mrw_jquery_txtcheck.html) i stavite je u inkluzije glavi tag potrebno: link na temu CSS datoteke i JS jQuery i 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>

Dodaj textarea u tijelu:

 



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

 

Zatim umetnite div koji sadrži progressbar i rezervirano mjesto da vam ideju o tome koliko likova su također numerički.

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







 Dostupni <p> ​​id="charCounter"> 255 </ span> znakova. </ P>

Sada možemo nastaviti pisati kod za zasebnu datoteku JavaScript / jQuery s potrebnim funkcijama, koji je tada također uključiti u glavu tag, zvat ćemo check_textarea.js.
Prije svega definirati osnovne varijable, dopušten znakova i one na raspolaganju imaju istu vrijednost na početku:

 MAX_CHARS = 255;







 Preostali = MAX_CHARS;

Tada ćemo definirati funkciju koja kontrolira i unapređuje progressbar i brojač:

 checkTextareaLength funkcija () {





  



 current_length == undefined var = $ ("# limitedOne"). val (). dužina?

 



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



  



 Preostali = (MAX_CHARS - current_length);



	

  



 if (Preostali> 0) {

	

    



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



  



 Else {}



    



 $ ("# CharCounter") HTML (preostalo).;



    



 var PV = Math.floor ((((MAX_CHARS-Preostali) / MAX_CHARS) * 100));



    



 . $ ('# Napredak ") Progressbar (' vrijednosti ', PV);



  



 }







 }

Idemo analizirati kod: prva linija u checkTextareaLength dobiva trenutnu vrijednost textarea koristeći funkciju Val () jQuery, tada računati broj znakova ušao čitajući duljine atributa.
Na sljedeći redak daje broj znakova za razliku. U ovom trenutku postoje dvije mogućnosti.

1. Preostali varijabla manja od nule (npr. nakon copy / paste) ako blok pokupi vrijednost textarea i ograničenja do 255 znakova pomoću materinjem JavaScript podniz

 



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

 

2. Preostalo je veća od nule, drugi blok u prvi vijek je pojačan s brojem preostalih znakova:

 



 $ ("# CharCounter") HTML (preostalo).;

 

Tada funkcija izračunava omjer između maksimalnog broja znakova na raspolaganju i onih trenutno uključeni, knjižnica funkcija runde rezultat Math.floor (dolje) do najbliže:

 



 var PV = Math.floor ((((MAX_CHARS-Preostali) / MAX_CHARS) * 100));

 

U ovom trenutku možemo samo dodijeliti vrijednost nalazi u progressbar

 



 . $ ('# Napredak ") Progressbar (' vrijednosti ', PV);

 

Neka je pisanje koda koji se izvršava na DOM Spremni.
Mi inicijalizirati svezati progressbar i provesti događaje želite presresti: pritiskom, mouseout, mijenjati i zamagliti. Monitor ih sve presresti slučaju da korisnik treba koristiti copy / paste.
Imajte na umu da je funkcija poziv odgoditi nekoliko stotinki sekunde kroz domaće funkciju setTimeout pa budite sigurni da uvijek imaju vrijednost u odgovarajuće vrijeme, kada korisnik ima završio tipkati.

 $ (Funkcija () {



  



 $ ("# Napredak") Progressbar ().;



  



 $ ("# LimitedOne.") Povežite ("pritisak promjena mouseout mutnih slika, funkcija () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>