jQuery: edistymispalkki näyttää "täyttäminen" on textarea

Usein ongelmat näyttävät helppo ratkaista, osoittautua kaikkein odotettua vaikeammaksi, ja se on että yleensä on olemassa menettää puoli työpäivän extricating yrittää enemmän tai vähemmän oikeaoppinen ja kuumeinen neuvotteluja sivustot, epätoivoinen joku, joka on jo edessä ongelma.

Kun projekti olin tarve rajoittaa merkkien määrää sallittu textarea Kuvittelin ratkaista muutamassa minuutissa, se ei ollut niin, löysin useita ratkaisuja netistä, mutta mitään vakuuttavia minut loppuun, joten päätin toteuttaa jotain custom käyttäen jQuery ja erinomainen jQueryUI , erityisesti kollin rakenneosa progessbar.

Perintä tarvittavat tiedostot

Colleghiamoci on http://jqueryui.com/ ja klikkaa painiketta "Lataa mittatilaustyönä" oikeassa yläreunassa.
Seuraavalla sivulla valitse hyödyllisiä komponentteja, ja yksi käytettävissä vekottimet päätämme ottaa vain ProgressBar.

Valitsemme graafisen mallin, pudotusvalikosta oikealla ja valitse "Download". Pura paketti juuri lataamasi ja löytää kolme kansiota ja tiedostoa root:

• css kansio sisältää teema, meidän tapauksessamme Oletuksena UI-keveyttä
• kehitys-bundle sisältää esimerkkejä ja dokumentointi
• JS: sisältää kaksi tiedostoa, joita tarvitaan ratkaisumme, jQuery ja jQuery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: sivu, jonka avulla voimme nähdä esimerkin teemalla / widgetit, että olemme valinneet

Meidän pieni esimerkki luo yksinkertainen rakenne seuraavasti:

• puretaan kansio jQueryUI (jQuery-ui-1.8.9.custom)
• tiedosto.html paketti sisältää textarea
• file.js sisältää jQuery koodi

Luomme HTML-tiedoston, anna sille kuvaava nimi (me kutsumme mrw_jquery_txtcheck.html) ja työnnä pää tag sulkeumat tarpeen: linkki teeman CSS-tiedostot ja JS jQuery ja 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>

Lisää textarea kehossa:

 



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

 

Laita sitten div, joka sisältää ProgressBar ja paikkamerkki antaa sinulle käsityksen siitä, kuinka monta merkkiä ovat myös numeerisia.

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







 Käytettävissä <p> <span id="charCounter"> 255 </ span> merkkiä. </ P>

Nyt voimme edetä kirjoittaa koodi erilliseen tiedostoon JavaScript / jQuery tarvittavat toiminnot, jotka sitten myös sen pään tag soitamme check_textarea.js.
Ensinnäkin määritellä perusmuuttujat; merkkiä sallittua ja käytettävissä olevat on sama arvo alussa:

 MAX_CHARS = 255;







 Jäljellä = MAX_CHARS;

Sitten määritellä funktio, joka valvoo ja tehostaa ProgressBar ja laskuri:

 checkTextareaLength function () {





  



 current_length == määrittelemätön var = $ ("# limitedOne"). Val (). pituus?

 



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



  



 Erotus = (MAX_CHARS - current_length);



	

  



 jos (Jäljellä> 0) {

	

    



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



  



 Else {}



    



 $ ("# CharCounter"). Html (jäljellä);



    



 var PV = Math.floor ((((MAX_CHARS-jäljellä) / MAX_CHARS) * 100));



    



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



  



 }







 }

Katsotaanpa analysoida koodi: ensimmäinen rivi checkTextareaLength saa nykyarvoa textarea funktiolla Val () jQuery, sitten laskea, kuinka monta merkeissä lukemalla pituus määrite.
Seuraavalla rivillä antaa olevia merkkejä erilaisuuden. Tässä vaiheessa on 2 mahdollisuuksia.

1. Jäljellä oleva muuttuja on pienempi kuin nolla (esim. kun copy / paste) jos lohko poimii arvo textarea ja rajoituksia sen 255 merkkiä käyttäen native JavaScript osajono

 



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

 

2. Jäljellä on suurempi kuin nolla, muuten lohko ensimmäisen span on parannettu jäljellä olevien merkkien määrä:

 



 $ ("# CharCounter"). Html (jäljellä);

 

Sitten funktio laskee suhde merkkien enimmäismäärä käytettävissä, ja kyseiset nykyisin kuuluvat, kirjastoon funktio pyöristää tuloksen Math.floor (alas) lähimpään:

 



 var PV = Math.floor ((((MAX_CHARS-jäljellä) / MAX_CHARS) * 100));

 

Tässä vaiheessa voimme vain antaa arvoa löytyy ProgressBar

 



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

 

Kirjoitetaan koodi, joka teloitettiin DOM Ready.
Me alustaa ProgressBar sitoa ja toteuttaa tapahtumia haluat siepata: keypress, mouseout, muuttaa ja hämärtää. Monitor ne kaikki kuunnella tapauksessa, että käyttäjä tulisi käyttää copy / paste.
Huomaa, että toiminto puhelu on lykätty muutaman sekunnin sadasosia kautta natiivi toiminto setTimeout niin varmasti aina arvoon oikeaan aikaan, kun käyttäjä on lopettanut kirjoittamisen.

 $ (Function () {



  



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



  



 $ ("# LimitedOne.") Bind ("keypress muutos mouseout hämärtää", function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>