Counting length of user entered text inside textarea with a upper limit using JQuery

We can count the number of text entered by user ( as they type ) inside a textarea and display the sum to user. This will give user an idea about how many chars left to be entered and how to complete the message without hitting the upper limit.

Video Tutorial on JQuery UI Progress Bar

Let us start with our text area with id = t1

<textarea name=t1 rows=4 cols=60 id=t1></textarea>
<div id=d1>0</div>

To display the counting value we used one div layer d1
Any time we can get the text entered inside the textarea by using val().

var str=$('#t1').val();

Length of this string can be calculated like this.

$('#d1').html(str.length);

Above two steps we have to calculate every time user enters any character inside the textarea. For this we have to use keyup event of textarea.

$('#t1').keyup(function(){

})

Maximum length of string allowed.

For this we will use attr() method to set the maximum value of string length allowed.

$("#t1").attr('maxlength','50');

Here is the full code

<script>
$(document).ready(function() {
//////////////////////////
$("#t1").attr('maxlength','50');
$('#t1').keyup(function(){
var str=$('#t1').val();
$('#d1').html(str.length);
})
////////////
})
</script>

Demo of textarea counter

With Progress Bar

By using JQuery UI we can also show a progress bar along with counter to give a visual display of progress.
Here is how to display the progress bar

<div id="p1" ></div>

Our total JQuery code with progress bar is here

<script>
$(document).ready(function() {
//////////////////////////
$("#t1").attr('maxlength','50');
$('#t1').keyup(function(){
var str=$('#t1').val();
$('#d1').html(str.length);
$( "#p1" ).progressbar( "option", "value", str.length );
})
////////////
$( "#p1" ).progressbar({
  value: 0,
max:50
});
////////////
})
</script>

Demo of textarea counter with progress bar Demo of validation script using bootstrap design

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Limiting number of text entered inside a textarea

Video Tutorial on JQuery UI Progress Bar

Maximum length of string allowed.

With Progress Bar

Subscribe

1

2

3

4