wordCountIn this tutorial, I will demonstrate how we can build Live character count meter, usually we have seen normal character count textboxs but here we are going to implement with progress bar and few lines of javaScript code.A TextArea character counter informs your visitors the number of characters they can type in. The counter will update itself when each character is typed into the textarea.I’m sure with which we can enrich our web applications using such simple ways.

Step by Step Walkthrough:

So let’s start with our Html-document:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<div  style="margin:auto; padding:auto;width:500px;">
  <div style="height:25px">
    <div style="float:left"><b>Character Count Meter</b></div>
    <div id="barbox">
      <div id="progressbar"></div>
    </div>
    <div id="count">225</div>
  </div>
  <p>
    <textarea id="text_area_input" title="Please enter description"></textarea>
  </p>
  </div>
</body>

javaScript Code:

The purpose of this code is to count the characters when they are typed in the textarea and to set the maximum value of the character count indicating the values count with progress bar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function()//When the dom is ready
{
$('#text_area_input').keyup(function()
//Detect keypress in the textarea
{
var text_area_box =$(this).val();//Get the values in the textarea
var max_numb_of_words = 225;//Set the Maximum Number of characters
var main = text_area_box.length*100;//Multiply the lenght on words x 100
var value= (main / max_numb_of_words);//Divide it by the Max numb of words previously declared
var count= max_numb_of_words - text_area_box.length;//Get Count of remaining characters
if(text_area_box.length <= max_numb_of_words)
{
$('#progressbar').css('background-color','#5fbbde');//Set the background of the progressbar to blue
$('#count').html(count);//Output the count variable previously calculated into the div with id= count
$('#progressbar').animate(//Increase the width of the css property 'width'
{
'width': value+'%',
}, 1);//Increase the progress bar
}

Limit the Character count

If user tries to enter more than 225 characters ,any excess will be removed using substr() function and indicates the progress bar by changing the color.

The code below will dynamically set the height of the Textarea to 75 pixels when the user clicks into the textarea.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
else
{
      $('#progressbar').css('background-color','red');
//If More words is typed into the textarea than the specified limit ,
//Change the progress bar from blue to red
var remove_excess_characters =text_area_box.substr(0,max_numb_of_words);
$('#text_area_input').val(remove_excess_characters);
//Remove the excess words using substring
}
return false;
});
});

 

CSS Flow

Right before our opening clause I have setup two variables pointing to page elements. This code gives us easier access to the submit button wrapper and the input text field. We need these elements to hide the submission button and pull the current e-mail value, respectively.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#text_area_input {
    width:508px;
    min-height:36px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    border-color:#AEAEAE #BBBBBB #BBBBBB;
    border-style:solid;
    border-width:1px;
    border-top:2px solid #E8E8E8;
}
#progressbar {
    width:0px;
    height:16px;
}
#barbox {
    float:right;
    height:16px;
    background-color:#FFFFFF;
    width:100px;
    border:solid 2px #000;
    margin-right:3px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
#count {
    float:right;
    margin-right:8px;
    font-family:'Georgia', Times New Roman, Times, serif;
    font-size:16px;
    font-weight:bold;
    color:#666666
}

 

Conclusion

I hope this tutorial can give you some insight how to create and use it.Feel free to download source code and play around on your own. This is the best way to become familiar with HTML/CSS/JS and even port code into your own projects. If you have similar questions or feedback be sure to let us know in the comments discussion area.

Reference: technotz

Leave a Reply

Your email address will not be published. Required fields are marked *