Limiting number of text entered inside a textarea

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. 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').keyup(function(){
$("#t1").attr('maxlength','50');
var str=$('#t1').val();
$('#d1').html(str.length);
})
////////////
})
</script>

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').keyup(function(){
$("#t1").attr('maxlength','50');
var str=$('#t1').val();
$('#d1').html(str.length);
$( "#p1" ).progressbar( "option", "value", str.length );
})
////////////
$( "#p1" ).progressbar({
  value: 0,
max:50
});
////////////
})
</script>
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer