Hi Friends, today I will show you how to Limit TextArea Characters using Jquery tutorial. Here, we use a simple input box like Textarea and to check the character count we use simple Jquery.
Please download the code below or check out the Demo given.
Here is the step by step tutorial:
Step 1: HTML Code
[code]
<div class="col-md-6 col-md-offset-3 bg-warning" style="padding:40px;">
<h3>Enter Characters : </h3>
<textarea class="form-control"></textarea>
<div id="content"></div>
</div>
[/code]
Step 2: JQUERY
[code]
var setTotalNumberOfWordCounter = "10";
$(‘textarea’).keypress(function(e) {
var tval = $(‘textarea’).val(),
tlength = tval.length,
remain = parseInt(setTotalNumberOfWordCounter – tlength);
$(‘p’).text(remain);
if (remain <= 0 && e.which !== 0 && e.charCode !== 0) { $(‘textarea’).val((tval).substring(0, tlength – 1)); $(‘#show_count’).val(0); return false; } if (tlength > setTotalNumberOfWordCounter) { //compare this length with total count
tval = tval.substring(0, setTotalNumberOfWordCounter);
$().val(tval);
return false;
}
$(‘#show_count’).val(setTotalNumberOfWordCounter – tlength);
});
$(‘#content’).html("
<div class=’total_count’>total remaining Charatctor: <input type=’text’ id=’show_count’ name=’totalWordLimit’ size=4 readonly value=" + setTotalNumberOfWordCounter + "></div>
");
[/code]
Finally we have completed this tutorial. I hope it will help you!
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.
5. IOS Training Institute in Mumbai.