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.
  • 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

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer