jQuery: a progress bar to show the "fill" in a textarea

Often problems seem easy to solve, prove the most difficult than expected, and that is that typically there is to lose half a day's work extricating retry more or less orthodox and feverish consultations websites, desperate for someone who has already faced the problem.

When a project I had the need to limit the number of characters allowed in a textarea I thought I solved in a few minutes, it was not so, I found several solutions on the net but no convincing me to the end, so I decided to implement something custom using jQuery and excellent jQueryUI , in particular the component of the package progessbar.

Recovery of files needed

Colleghiamoci to http://jqueryui.com/ and click on the button "download custom Build" at the top right.
On the next page select useful components, and one of the available widgets we decide to take only the progressbar.

We choose the graphic template from the drop-down list on the right and click on "Download". Unzip the package you just downloaded and find three folders and a file in the root:

• css folder containing the theme, in our case the default, ui-lightness
• development-bundle contains examples and documentation
• js: contains the two files needed to run our solution; jquery and jquery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: a page that allows us to see an example of themed / the widgets that we have chosen

For our small example will create a simple structure as follows:

• decompressed folder to jQueryUI (jquery-ui-1.8.9.custom)
• file.html package containing the textarea
• file.js containing the jQuery code

We create our HTML file, give it a meaningful name (we'll call mrw_jquery_txtcheck.html) and insert in the head tag inclusions necessary: ​​the link to the theme css files and js jQuery and 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>

Add the textarea in the body:

 



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

 

Then insert the div that contains the progressbar and a placeholder to give you an idea of how many characters are also numerical.

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







 Available <p> <span id="charCounter"> 255 </ span> characters. </ p>

Now we can proceed to write the code to a separate file JavaScript / jQuery with the necessary functions, which then also include it in the head tag, we'll call check_textarea.js.
First of all define the basic variables; characters allowed and those available have the same value at the beginning:

 MAX_CHARS = 255;







 Remaining = MAX_CHARS;

Then we define the function that controls and enhances progressbar and counter:

 checkTextareaLength function () {





  



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

 



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



  



 Remaining = (MAX_CHARS - current_length);



	

  



 if (Remaining> 0) {

	

    



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



  



 Else {}



    



 $ ("# CharCounter"). Html (Remaining);



    



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



    



 $ ('# Progress'). Progressbar ('value', pv);



  



 }







 }

Let's analyze the code: the first line in checkTextareaLength gets the current value of the textarea using the function val () jQuery, then count the number of characters entered by reading the length attribute.
On the next line gives the number of characters available for difference. At this point there are 2 possibilities.

1. Remaining the variable is less than zero (eg after a copy / paste) the if block picks up the value of the textarea and limits it to 255 characters using the native JavaScript substring

 



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

 

2. Remaining is greater than zero, else block in the first span is enhanced with the number of characters left:

 



 $ ("# CharCounter"). Html (Remaining);

 

Then the function calculates the ratio between the maximum number of characters available and those currently included, the library function rounds the result Math.floor (down) to the nearest:

 



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

 

At this point we can only assign the value found in the progressbar

 



 $ ('# Progress'). Progressbar ('value', pv);

 

Let's write the code that is executed on the DOM Ready.
We initialize the progressbar bind and carry out the events you want to intercept: the keypress, the mouseout, change, and the blur. Monitor them all to intercept the event that the user should use the copy / paste.
Note that the function call is postponed by a few hundredths of a second through the native function setTimeout so be sure to always have the value at the appropriate time, when the user has finished typing.

 $ (Function () {



  



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



  



 $ ("# LimitedOne.") Bind ("keypress change mouseout blur ', function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>