<textarea maxlength='20'></textarea>

$(document).ready(function() {

	$('textarea[maxlength]').keyup(function(){
		//get the limit from maxlength attribute
		var limit = parseInt($(this).attr('maxlength'));
		//get the current text inside the textarea
		var text = $(this).val();
		//count the number of characters in the text
		var chars = text.length;

		//check if there are more characters then allowed
		if(chars > limit){
			//and if there are use substr to get the text before the limit
			var new_text = text.substr(0, limit);

			//and change the current text with the new text
			$(this).val(new_text);
		}
	});

});

Comments

• Rupert Sep 18th, 09

  A similar jQuery plugin for setting Maxlength of a textarea:
  http://viralpatel.net/blogs/2008/12/set-maxlength-of-textarea-input-using-jquery-javascript.html
• Boba Sep 18th, 09

  That one doesn’t work with copy paste
• Mosharaf Oct 23rd, 09

  Cool code it works! Nice!
• Calin Dec 11th, 09

  new in jQuery.
  this script proves the power of jQuery.
  thanks for sharing
• Boba Dec 11th, 09

  @Calin – That’s only a little bit of jQuery power.
• Jaap Feb 23rd, 10

  For extra convience you can also add a counter.
  Just add a span somewhere

  (Added spaces for display purposes)

  And add a litle piece of js:

  $(“.remaining”).html((limit – text.length) + ” letters remaining.”);

  Or:

  $(“.remaining”).html((text.length) + ” letters written.”);
• Jaap Feb 23rd, 10

  I saw that the blog stripped out the little HTML I punt in… so I’ll explain.

  You can just add a span or div with the class “remaining” and it’ll smash in the text there…

  You could also make it prettier by doing this:

  var chars = text.length;

  var charsLeft = limit – text.length;

  if(charsLeft < 1 ){
  charsLeft = 'No’;
  }

  $(“.remaining”).html(charsLeft + ” letters left.”);

  I added dashes in the hope the span now stays in tact…

  Cheers!
• Boba Feb 23rd, 10

  Try < and >

  Edit:

  &lt and &gt with the ; at the end

Leave your own!

Your Name

Email

Website

Comment