This is slightly different implementation of the jquery textarea text limit counter found at: http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/. The main difference is that the user is not cutoff when he reaches the limit of the allowed characters but he is notified via the counter that his text is longer than expected.

The idea behind it is to have a textarea that accepts user input and there is  a limit in the characters that you want you are allowed to type in the textarea. While you type in characters in the textarea a counter is updated that shows the remaining characters. The number is correct even when you reload the page and the area is pre-populated with text. This particular demo uses jquery 1.5.1

The HTML needed for this is very simple and straightforward. You need to have a form with a textarea, preferably with a form label attached to the textarea, and a span (or div or other element like a heading) element that will show the remaining characters count. The textarea and the span element need to have an id so that we can reference them from our JQuery script. So, the following HTML is all you need to have.

Short Description: (<span id="chars1"></span> Characters left)

The JQuery script needed for our textarea text limit counter to work is the one presented here. The .fn.extend JQuery function is used to extend the functionality of the library with the functions that we are going to define, so that we can use them for our textareas as we would with any other JQuery function. The first function defined is called limiterCheck and we are going to use it to set the initial values to the span element and to check the status of the textareas when they are loaded for the first time in our browser window (this is necessary so that when someone refreshes the page or the text is populated on load the counter will display the correct values). The function accepts two parameters limit, eleUpdate which are the text we wish to limit the input and the id of the element that we should update with the remaining characters. Just to make things a bit clearer for the user we change the color of the remaining characters from green (if the textarea can accept more characters) to red (if the textarea cannot accept any more characters, in which case we start counting negatives).

$(document).ready(function(){
	$.fn.extend({
		limiterCheck: function(limit, eleUpdate) {
			var charsCurrent = $(this).val().length;
			var charsLeft = limit - charsCurrent;

			$(eleUpdate).text(charsLeft);

			if (charsCurrent > limit) {
				$(eleUpdate).css('color', 'red');
			} else {
				$(eleUpdate).css('color', 'green');
			}
		},
		limiter: function(limit, eleUpdate) {
			$(this).keydown(function(event){
				var charsCurrent = $(this).val().length;
				var charsLeft = limit - charsCurrent;

				$(eleUpdate).text(charsLeft);

				if (charsCurrent > limit) {
					$(eleUpdate).css('color', 'red');
				} else {
					$(eleUpdate).css('color', 'green');
				}
			});
		}
	});

	var text1Length = 500;
	$("#text1").limiterCheck(text1Length, '#chars1');
	$("#text1").limiter(text1Length, '#chars1');
});

The second function is called limiter and accepts the same parameters but this time the function is fired on the keyup event of the element that has called it and acts the same way as the the limiterCheck function.

Finally we need to initialize and call our functions for the HTML elements we have added in our webpage.  In order for our code to be more clear I define a variable that holds the text limit. Then for our textarea we first call the limiterCheck function (to properly initialize our counter) and then the limiter function to handle the typed or pasted text that goes in our textarea. That’s it!

You can view a working demo of the limiter here: DEMO

(*) Obviously this is just a visual counter that does not limit the actuall text submitted from the textarea. Checks should be performed in the server-side of your site/application implementation to ensure that the limit is honored.