Looking to build a Twitter-like textarea character countdown to show your users how much space they have remaining?
Good. See below.
See the Pen Really easy textarea character countdown by Geoff Muskett (@geoffmuskett) on CodePen.6289
I’ve seen a few tutorials online but they seem to make it more complex than it needs to be. Just a few lines of jQuery does the trick.
1. Set a variable for the max number of characters:
var maxLength = 100;
2. Use the keyup event on the textarea, which fires each time a key is pressed when the textarea is in focus. Ideal:
$('textarea').keyup(function() {
3. Check the value and get the length of it, store it in a variable:
var length = $(this).val().length;
4. Take that value away from your max width:
var length = maxLength-length;
5. Put the result somewhere on the page:
$('#chars').text(length);
Done.
Comments
Reynald
When I try to run this through visual studio on IE, it doesn't work. Any idea why? It works in IE when looking at your page.
Geoff Muskett
Hi Reynald, sorry for the slow reply. I really need to set up notifications for comments!
I wouldn't worry about not working in visual studio, I've never used it, but if the site works in the wild thats fine.
That said, you could try keypress instead of keyup. I don't think support is that great on older windows phones for that through.
Best of luck
Paulo Henrique
$('#mesage').prop('maxlength', '1500');
shegun
Mix characters with line breaks and the text counter counts wrongly.
Geoff Muskett
If you're allowing HTML in there you'd something more advanced than this. Perhaps you could detect wether < or > keys have been pressed and ignore them. Or look for
with regex perhaps.
Robert Oswald
I think it's worth mentioning that "maxlength" is not supported on textareas in IE prior v10 in case legacy browser support is a requirement.
Rob Sanders
Carriage returns count as 2 characters. It would help to add logic with regex to count and adjust your character countdown based on the number of carriage returns.
Also using
var maxLength = $(this).attr('maxlength');
will dynamically obtain a value from the textarea attribute for maxlength.
Freddy Sidauruk
hi i have success use your code but why when textarea more than 100 users still can tying !
please guide me
Kiran
tjsi code is working fine for me on bith IE and Chrom..but the problem is we on maing page i'm having diffrent cards and each cards having a text are..if selected card 1 and enterd 3 characteres ans saved...and while i'm selecting the second card its still shows the remaing caharacters from the first cards...Can you help mr to reslove this?
Maria
My plugin :
There is a demo page showing all options and usage
https://github.com/rothy1248/charlimit
Maria
You can also use this
https://github.com/rothy1248/charlimit
Chris
Thanks for taking the time to post this, but there is a small bug with your script. Press and hold enter (while focused on the textarea) and then start typing. The count doesn't update properly and I can still type 2 characters afterwards. Thats in Chrome. Hope this helps.
Anonymous
Really simple? This is *too* simple, because it doesn't allow for changes made via the mouse or Edit menu.
Cliff
Thank you for this!
Atanu Dey
Simple and effective. Good work.
Govinda
Nice one.... Short but Sweet....
OzWizard
6. Close the function.
});
Gaurav
Excellent code and very easy one. Thanks
Manish Kumar Jaiswal
var maxchar = 10;
$('#message').after('');
$('#count').html(maxchar+' of '+maxchar);
$('#message').attr('maxlength', maxchar);
$('#message').parent().addClass('wrap-text');
$('#message').on("keydown", function(e){
var len = $('#message').val().length;
if (len >= maxchar && e.keyCode != 8)
e.preventDefault();
else if(len <= maxchar && e.keyCode == 8){
if(len <= maxchar && len != 0)
$('#count').html(maxchar+' of '+(maxchar - len +1));
else if(len == 0)
$('#count').html(maxchar+' of '+(maxchar - len));
}else
$('#count').html(maxchar+' of '+(maxchar - len-1));
})
Baruch Moskovits
To address issues raised by Chris and Anonymous, I made a slight change from this:
$('textarea').keyup(function() {
to this:
$('textarea').on('change keyup paste', function() {
Ian
Nice and simple, took me around 20 seconds to have this working on my site.
Cheers!
Paul
This was way easy
om deshmane
i tried this code but my requirement is,only when count is " 0 charcter remain " it should come in red font.