<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 d1var 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(){
})
$("#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
<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
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |