jQuery: ukazatel průběhu ukázat, "plnění" z TextArea

Často se zdá, problémy snadno řešit, ukázat nejtěžší, než se očekávalo, a to je to, že obvykle je ztratit půl dne práce vyproštění opakování více či méně ortodoxní a horečnaté konzultace webových stránek, zoufalý pro někoho, kdo již stál před problém.

Když projekt jsem měl, že je třeba omezit počet znaků v textarea jsem si myslel, vyřešit během několika málo minut, nebylo to tak, jsem našel několik řešení na netu, ale žádný přesvědčivý mě až do konce, tak jsem se rozhodl realizovat něco, co vlastní pomocí jQuery a vynikající jQueryUI , zejména součást balíčku progessbar.

Obnova potřebné soubory

Colleghiamoci na http://jqueryui.com/ a klikněte na tlačítko "download vlastní sestavení" v pravém horním rohu.
Na další stránce vyberte užitečné prvky, a jednu z dostupných widgetů jsme se rozhodli vzít jen ProgressBar.

Vybíráme si grafickou šablonu z rozbalovacího seznamu na pravé straně a klikněte na "Download". Rozbalte balíček, který jste právě stáhli a najít tří složek a souborů v kořenovém adresáři:

• css složku obsahující téma, v našem případě je výchozí, ui, lehkost
• rozvoj balíček obsahuje příklady a dokumentaci
• JS: obsahuje dva soubory potřebné ke spuštění našich řešení, jQuery a jQuery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: stránku, která nám umožňuje vidět příklad themed / widgety, které jsme zvolili

Pro náš malý příklad vytvoří jednoduchou strukturu takto:

• rozbalit složku jQueryUI (jQuery-ui-1.8.9.custom)
• soubor.html balíček obsahující textového pole
• file.js obsahující jQuery kód

Vytváříme náš HTML soubor, dát mu smysluplný název (zavoláme mrw_jquery_txtcheck.html) a vložte do hlavy zahrnutí tag třeba: odkaz na téma CSS souborů 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>

Přidejte textarea v těle:

 



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

 

Potom vložte div, který obsahuje ProgressBar a vyhrazené místo pro vaši představu o tom, kolik znaků je také numerické.

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







 K dispozici <p> ​​id="charCounter"> 255 </ span> znaky. </ P>

Nyní můžeme přistoupit k psaní kódu do samostatného souboru JavaScript / jQuery s potřebnými funkcemi, které se pak také, že v hlavě tag, zavoláme check_textarea.js.
Především definuje základní veličiny, povolených znaků a jsou k dispozici mají stejnou hodnotu na začátku:

 MAX_CHARS = 255;







 Zbývající = MAX_CHARS;

Pak jsme se definovat funkci, která řídí a zlepšuje ProgressBar a proti:

 checkTextareaLength function () {





  



 current_length == nedefinované var = $ ("# limitedOne"). val (). Délka?

 



 0: $ ("# limitedOne"), Val () délka;..



  



 Zbývající = (MAX_CHARS - current_length);



	

  



 if (Ostatní> 0) {

	

    



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



  



 Else {}



    



 $ ("# CharCounter"), HTML (zbývající).



    



 var PV = Math.floor ((((MAX_CHARS-zbývající) / MAX_CHARS) * 100));



    



 . $ ('# Progress) ProgressBar ("hodnoty", pv);



  



 }







 }

Pojďme analyzovat kód: první řádek v checkTextareaLength získá aktuální hodnotu TextArea pomocí funkce val () jQuery, pak spočítat počet znaků zadaných čtení délka atributu.
Na dalším řádku udává počet znaků, rozdíl. V tuto chvíli jsou zde 2 možnosti.

1. Zbývající proměnné je menší než nula (např. po copy / paste) Je-li blok zvedne hodnotu TextArea a limitů na 255 znaků pomocí nativní JavaScript podřetězec

 



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

 

2. Zbývající je větší než nula, jinak blok v prvním rozpětí je rozšířena o počet zbývajících znaků:

 



 $ ("# CharCounter"), HTML (zbývající).

 

Pak funkce vypočítá poměr mezi maximální počet znaků, které v současnosti k dispozici, a včetně, kola funkci knihovny výsledek Math.floor (dolů) na nejbližší:

 



 var PV = Math.floor ((((MAX_CHARS-zbývající) / MAX_CHARS) * 100));

 

V tomto bodě můžeme přiřadit pouze hodnoty naměřené v ProgressBar

 



 . $ ('# Progress) ProgressBar ("hodnoty", pv);

 

Pojďme psát kód, který je spuštěn na DOM Ready.
My inicializovat ProgressBar vázat a provést události, které chcete zachytit: kláves, mouseOut, změnu a rozmazání. Monitor je všechny zachytit případě, že uživatel by měl používat kopírovat / vložit.
Všimněte si, že volání funkce je odložen o několik setin sekundy přes nativní funkce setTimeout, takže se ujistěte, že mají vždy hodnotu ve vhodnou dobu, kdy má uživatel dopíšete.

 $ (Function () {



  



 $ ("# Progress") ProgressBar ().



  



 $ ("# LimitedOne.") Bind ("kláves změnit mouseOut blur", function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>