jQuery plugin для ограничения количества символов в textarea

В одном проекте понадобилось добавить ограничение на количество вводимых символов в textarea. Но так, чтобы отображалось количество символов, которые еще можно ввести в поле. Пример из жизни  - отправка sms через сайты сотовых операторов.

Приблизительно вот так:

Описание	Тут будет описание

И нужно это было не в одной формочке, а в нескольких. Для этих целей решено было написать jQuery-плагин, который мог легко навешиваться на textarea примерно так:

$("textarea").limitTextArea();

Сказано, сделано! Реализация самого плагина достаточна тривиальна. мы просто размещаем div-элемент со счетчиком перед textarea и обновляем информацию о количестве символов при возникновении события keyup в textarea.

var maxLength = $this.attr("maxlength");
var label = $('<div/>', {
		"class" : "textAreaLabel"
	}).insertBefore($this);


function updateLabel()
{
	var charactersLeft = maxLength - $this.val().length;

	if(charactersLeft < 0)
		charactersLeft = 0;

	label.html("Осталось " + charactersLeft + " символов");
}

Для акцентирования внимания при нарушении допустимого предела - подсвечиваем счетчик и не забываем убрать подсветку, если пользователь поудалял часть текста.

var wasLimitExceeded = false;
function onChange()
{
	if($this.val().length >= maxLength)
	{
		label.addClass("alert");
		// Cut down the string
		$this.val($this.val().substr(0, maxLength));
		wasLimitExceeded = true;
	}
	else if(wasLimitExceeded)
	{
		label.removeClass("alert");
	}

	updateLabel();
}

$this.keyup(onChange).keydown(onChange);

Ну а чтобы счетчики не пестрили на странице с несколькими textarea, добавляем яркости при переводе фокуса на данный элемент

$this
	.focusout(function() {label.removeClass("hover")})
	.focusin(function() {label.addClass("hover")});

Осталось дело за малым - привязать счетчик к правой части textarea. В моем случае дело было достаточно простым, так как textarea был вписан в таблицу.

div.textAreaLabel {
	position: relative; 
	margin-top: -20px; 
	height: 20px; 
	text-align: right; 
	font-style: italic; 
	color: #d3d3d3; 
	font-size: 10pt;
}
div.textAreaLabel.hover {color: gray;}
div.textAreaLabel.alert {color: red;}

Исходники можно найти тут: https://github.com/z-ghost/LimitTextArea