Поговорим здесь о таком небольшом, но очень полезном usability-элементе как счетчик символов для полей формы. Также я слегка затрону тему прототипов в javascript. Теперь подробнее.

Наверняка многие из Вас сталкивались с тем, чтобы ограничить ввод пользовательских данных длиной поля для удобства последующей валидации. К примеру, такие ограничения полезны при работе с официальными данными, оформленными по стандартам — номера ИНН, КПП и т.д.

Однако, если Вы хотите создать дружелюбный интерфейс, не стоит просто ограничивать пользователя. Нужно подготовить его к этому.

Теперь код с примерами доступен на моем аккаунте в GitHub!

Приступим! Для начала как всегда подключим jQuery для удобного управления DOM-элементами.

Мы можем создавать счетчики каждый раз под каждую конкретную страницу. Но это очень неудобно. Гораздо проще создать абстрактный счетчик, который можно будет навесить на любой элемент на странице при помощи одной команды. В этом нам и помогут прототипы. Они задают базовый набор функциональных возможностей классу объекта и являются стандартным свойством любого объекта в JS.

Для начала создадим новый класс объектов — Counter. Для него стоит задать параметры по умолчанию — имя, родительский элемент и максимальную длину поля.

function Counter() {
	this.name = "default-cnt"; // имя счетчика
	this.field = "body"; // родительское поле, на которое счетчик навешивается
	this.max_l = 0; // длина поля
}

Наш объект будет иметь два метода — создания и уничтожения.

Counter.prototype.show = function (selector) {
    if(selector === undefined)
        {
            return false;
        }

    this.name = selector + "-counter";
    this.field = selector;
    this.max_l = $("#"+selector).attr("maxlength");

    var value = this.max_l - $('#'+this.field).val().length; // текущее значение

    if(!this.max_l)
    {
        return this;
    }


    if($('.counter').length > 0)
    {
        /* singleton */
        if($('.counter').attr("id") != this.name)
            {
                $('.counter').destroy();
            }
        $("#"+this.name+"-span").html(value);
    }
    else
    {
        $("#"+this.field).parent().append("
");

        if(this.max_l)
        {
            $(".counter").css("left", $("#"+this.field).css("width"));
        	$(".counter").css("top", $("#"+this.field).offset().top+10);
            $("#"+this.name+"-span").append(value);
        }
    }

    return this;
};

Итак, свойство прототип позволяет нам задать метод show() для любого объекта класса Counter. Теперь мы можем свободно вызывать этот метод в любом месте кода после идентификации класса и прототипов.

Логика создания достаточно простая. Мы проверяем возможность создания счетчика, переопределяем имена для удобного и уникального обращения. Затем удаляем имеющиеся счетчики — пусть активен будет только один счетчик на странице — эдакий js-аналог паттерна singleton. Далее мы расчитываем оставшиеся символы простым арифметическим действием вычитания =) .

Однако, нетрудно заметить, что в коде я вызываю странный метод .destroy(). Здесь можно было бы обойтись и стандартным .remove(), но это не показательно.

Метод уничтожения будет прост до безобразия, однако, при желании его можно дополнить вспомогательным функционалом, зависящим от контекста проекта.

Counter.prototype.destroy = function(){
    $("#"+this.name).remove();
    return false;
}

Все! С проектированием закончили. Теперь попробуем применить созданный класс на практике.

Как я и говорил, счетчик подчиняется паттерну singleton, а значит мы создаем его только один раз, после чего навешиваем его на три события нажатия клавиши внутри поля, клика внутри поля и фокуса на полях с классом fields:

Также мы навесим событие уничтожения счетчика при уходе фокуса с требуемых полей:

$(".fields").blur(function(){
    cnt.destroy();
});

Замечу, что подключать библиотеку jquery и счетчиков необходимо в шапке документа, а вот инициализировать сам счетчик — только перед закрытием тега body, дабы счетчик видел, к чему цепляться!

Рабочий пример можно посмотреть здесь, а библиотека для счетчика лежить здесь

Всем спасибо за внимание! Безошибочного Вам кода!