jQuery: ukazovateľ priebehu ukázať, "plnenie" z Textarea

Často sa zdá, problémy ľahko riešiť, ukázať najťažšie, než sa očakávalo, a to je to, že obvykle je stratiť pol dňa práce vyslobodenie opakovanie viac či menej ortodoxní a horúčkovité konzultácie webových stránok, zúfalý pre niekoho, kto už stál pred problém.

Keď projekt som mal, že je potrebné obmedziť počet znakov v textarea som si myslel, vyriešiť v priebehu niekoľkých málo minút, nebolo to tak, som našiel niekoľko riešení na nete, ale žiadny presvedčivý ma až do konca, tak som sa rozhodol realizovať niečo, čo vlastní pomocou jQuery a vynikajúce jQueryUI , najmä súčasť balíčka progessbar.

Obnova potrebné súbory

Colleghiamoci na http://jqueryui.com/ a kliknite na tlačidlo "download vlastné zostavenie" v pravom hornom rohu.
Na ďalšej stránke vyberte užitočné prvky, a jednu z dostupných widgetov sme sa rozhodli vziať len lište.

Vyberáme si grafickú šablónu z rozbaľovacieho zoznamu na pravej strane a kliknite na "Download". Rozbaľte balíček, ktorý ste práve stiahli a nájsť troch zložiek a súborov v koreňovom adresári:

• css priečinok obsahujúci tému, v našom prípade je predvolený, ui, ľahkosť
• rozvoj balíček obsahuje príklady a dokumentáciu
• JS: obsahuje dva súbory potrebné na spustenie našich riešení, jQuery a jQuery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: stránku, ktorá nám umožňuje vidieť príklad themed / widgety, ktoré sme zvolili

Pre náš malý príklad vytvorí jednoduchú štruktúru takto:

• rozbaliť zložku jQueryUI (jQuery-ui-1.8.9.custom)
• soubor.html balíček obsahujúci textového poľa
• file.js obsahujúce jQuery kód

Vytvárame náš HTML súbor, dať mu zmysluplný názov (zavoláme mrw_jquery_txtcheck.html) a vložte do hlavy zahrnutie tag treba: odkaz na tému CSS súborov a JS a jQuery 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>

Pridajte textarea v tele:

 



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

 

Potom vložte div, ktorý obsahuje lište a vyhradené miesto pre vašu predstavu o tom, koľko znakov je tiež numerickej.

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







 K dispozícii <p> ​​id = "charCounter"> 255 </ span> znaky. </ P>

Teraz môžeme pristúpiť k písania kódu do samostatného súboru JavaScript / jQuery s potrebnými funkciami, ktoré sa potom tiež, že v hlave tag, zavoláme check_textarea.js.
Predovšetkým definuje základné veličiny, povolených znakov a sú k dispozícii majú rovnakú hodnotu na začiatku:

 MAX_CHARS = 255;







 Zostávajúce = MAX_CHARS;

Potom sme sa definovať funkciu, ktorá riadi a zlepšuje lište a proti:

 checkTextareaLength function () {





  



 current_length == nedefinované var = $ ("# limitedOne"). val (). Dĺžka?

 



 0: $ ("# limitedOne"), Val () dĺžka; ..



  



 Zostávajúce = (MAX_CHARS - current_length);



	

  



 if (Ostatné> 0) {

	

    



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



  



 Else {}



    



 $ ("# CharCounter"), HTML (zostávajúce).



    



 var PV = Math.floor ((((MAX_CHARS-zostávajúca) / MAX_CHARS) * 100));



    



 . $ ('# Progress) lište ("hodnoty", pv);



  



 }







 }

Poďme analyzovať kód: prvý riadok v checkTextareaLength získa aktuálnu hodnotu Textarea pomocou funkcie val () jQuery, potom spočítať počet znakov zadaných čítanie dĺžka atribútu.
Na ďalšom riadku udáva počet znakov, rozdiel. V tejto chvíli sú tu 2 možnosti.

1. Zostávajúce premennej je menšia ako nula (napr. po copy / paste) Ak je blok zdvihne hodnotu Textarea a limitov na 255 znakov pomocou natívne JavaScript podreťazec

 



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

 

2. Zostávajúce je väčší než nula, inak blok v prvom rozpätie je rozšírená o počet zostávajúcich znakov:

 



 $ ("# CharCounter"), HTML (zostávajúce).

 

Potom funkcia vypočíta pomer medzi maximálny počet znakov, ktoré v súčasnosti k dispozícii, a vrátane, kolesá funkciu knižnice výsledok Math.floor (dole) na najbližšie:

 



 var PV = Math.floor ((((MAX_CHARS-zostávajúca) / MAX_CHARS) * 100));

 

V tomto bode môžeme priradiť len hodnoty namerané v stavovej lište

 



 . $ ('# Progress) lište ("hodnoty", pv);

 

Poďme písať kód, ktorý je spustený na DOM Ready.
My inicializovať lište viazať a vykonať udalosti, ktoré chcete zachytiť: klávesov, mouseOut, zmenu a rozmazaniu. Monitor je všetky zachytiť prípade, že užívateľ by mal používať kopírovať / vložiť.
Všimnite si, že volanie funkcie je odložený o niekoľko stotín sekundy cez natívne funkcie setTimeout, takže sa uistite, že majú vždy hodnotu vo vhodnom čase, kedy má užívateľ dopíšete.

 $ (Function () {



  



 $ ("# Progress") lište ().



  



 $ ("# LimitedOne.") Bind ("klávesov zmeniť mouseOut blur", function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>