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