jQuery: o bara de progres pentru a arata "umplere" a unui textarea

Deseori, probleme par uşor de rezolvat, dovedi cel mai dificil decât se aştepta, şi că este faptul că de obicei nu este de a pierde jumatate iasă o zi de lucru încercaţi din nou mai mult sau mai puţin ortodoxe şi site-uri febrile consultări, disperate pentru cineva care sa confruntat deja problemă.

Atunci când un proiect am avut nevoie de a limita numărul de caractere dintr-un textarea Am crezut că am rezolvat în câteva minute, ea nu a fost aşa, am găsit soluţii mai multe pe net, dar nu mă convinge până la capăt, aşa că am decis să punerea în aplicare a particularizate ceva folosind jQuery şi excelente jQueryUI , în special componenta a pachetului progessbar.

Recuperarea fisierele necesare

Colleghiamoci la http://jqueryui.com/ şi faceţi clic pe butonul "download personalizat Build" la partea din dreapta sus.
Pe pagina următoare selectaţi componente utile, şi unul dintre widget-uri disponibile ne vom hotărî să ia doar progressbar.

Am ales pentru şablon grafic din lista drop-down din dreapta şi faceţi clic pe "Download". Dezarhivati ​​pachetul pe care tocmai aţi descărcat şi pentru a găsi trei dosare şi un fişier în rădăcină:

• dosarul CSS care conţin tema, în cazul nostru implicit, ui-luminozitate
• dezvoltare-pachet conţine exemple şi documentaţie
• js: conţine două fişiere necesare pentru a rula soluţia noastră; jquery şi jquery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: o pagină care ne permite sa vedem un exemplu de tematice / widget-uri pe care le-am ales

De exemplu, micul nostru va crea o structură simplă, după cum urmează:

• dosarul decomprimat la jQueryUI (jquery-ui-1.8.9.custom)
• Pachetul conţine file.html textarea
• file.js care conţin codul jQuery

Noi creem fişierul nostru de HTML, dau un nume semnificativ (vom numi mrw_jquery_txtcheck.html) şi se introduce în includerile tag capului necesare: legătură într-tema CSS fişierele şi jQuery js ş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>

Adauga textarea în organism:

 



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

 

Apoi introduceţi div care conţine progressbar şi un înlocuitor pentru a vă oferi o idee despre cât de multe caractere sunt, de asemenea, numerice.

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







 Disponibil <p> <span id="charCounter"> 255 </ span> de caractere. </ P>

Acum putem trece la a scrie cod într-un fişier separat JavaScript / jQuery cu funcţiile necesare, care includ, de asemenea, apoi l în tag-ul cap, vom suna check_textarea.js.
Mai întâi de toate definesc variabilele de bază; de caractere permise şi cele disponibile au aceeasi valoare de la început:

 MAX_CHARS = 255;







 Rămas = MAX_CHARS;

Apoi vom defini funcţia care controlează şi îmbunătăţeşte progressbar şi contra:

 Funcţia checkTextareaLength () {





  



 current_length == undefined var = $ ("# limitedOne"). val (). lungime?

 



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



  



 = Rămas (MAX_CHARS - current_length);



	

  



 dacă (Rămas> 0) {

	

    



 $ ("# LimitedOne") ($("# LimitedOne val ") Val () subşir (0, MAX_CHARS))..;.



  



 Else {}



    



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



    



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



    



 Progressbar $ ('# Progress ") (" valoare ", pv).;



  



 }







 }

Sa analizam codul: prima linie în checkTextareaLength devine valoarea curentă a textarea folosind funcţia de val () jQuery, conta atunci numărul de caractere introduse de lectură atributul lungime.
Pe următoarea linie dă numărul de caractere disponibile pentru diferenţă. In acest moment exista 2 posibilitati.

1. Rămas variabila este mai mică decât zero (de exemplu, după un copy / paste), în cazul în care blocul ponturi până la valoarea de textarea şi limitele la 255 de caractere folosind native subşir JavaScript

 



 $ ("# LimitedOne") ($("# LimitedOne val ") Val () subşir (0, MAX_CHARS))..;.

 

2. Rămas este mai mare decât zero, bloc altcineva din prima de control este îmbunătăţită cu numărul de caractere din stânga:

 



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

 

Atunci funcţia calculează raportul dintre numărul maxim de caractere disponibile şi cele incluse în prezent, funcţia de runde biblioteca Math.floor rezultat (jos) la cea mai apropiata:

 



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

 

În acest moment, putem atribui numai valoarea găsită în progressbar

 



 Progressbar $ ('# Progress ") (" valoare ", pv).;

 

Să scrie codul care este executat pe Ready DOM.
Am iniţializa obligati progressbar şi să efectueze evenimentele pe care doriţi să intercepta: apăsare de tastă, mouseout, schimbarea, şi blur. Monitor-le pe toate pentru a intercepta cazul în care utilizatorul ar trebui să utilizeze copy / paste.
Reţineţi că apelul funcţiei este amânat cu câteva sutimi de secundă prin intermediul setTimeout funcţia maternă fi atât de sigur de a avea întotdeauna valoarea la momentul potrivit, atunci când utilizatorul a terminat de scris.

 $ (Function () {



  



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



  



 $ ("# LimitedOne.") Bind ("apăsare de tastă schimbare mouseout blur", function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>