The other day I was trying to find a way to limit the amount of characters that a user could enter into a textbox. For some reason you can’t set the maxlength attribute on textareas, so I decided to make this little jquery snippet that truncates a user’s input once they go past a certain limit.
There’s an updated version of this script here
Save this snippet in a js file:
$(document).ready(function(){
$('textarea[maxlength]').keyup(function(){
var max = parseInt($(this).attr(’maxlength’));
if($(this).val().length > max){
$(this).val($(this).val().substr(0, $(this).attr('maxlength')));
}
$(this).parent().find('.charsRemaining').html('You have ' + (max - $(this).val().length) + ' characters remaining');
});
});
Just download and include jquery like so:
And then include the js file containing the above snippet
Then, to limit a textarea do this:
If you want to show the user the ‘You have x characters remaining’ message, then append an element with the ‘charsRemaining’ class, like so:
You have 255 characters remaining
You have to make sure that the p and textarea elements share the same parent, else the message won’t be updated.
Alex
UPDATE: Thanks for the parseInt() tip Jason
There’s an updated version of this script here