Javascript-форум - Мини библиотека для контроля ввода текста в TEXTAREA / INPUT

Привет всем!

Представляю вам очередную свою наработку. Хотя она уже и не новая, написано давно была в виде небольшого плагинчика. Но тут я решился уделить на нее время и немного ее переписать (хотя переписал полностью).

И так, библиотека позволяет контролировать входные данные в текстовые поля, такие как INPUT и TEXTAREA. В использовании очень проста, особенно для тех кто хорошо знаком с регулярными выражениями. Она не требует писать какого либо кода, не засоряет HTML мусором.

Я уже упоминал о ней в некоторых топиках этого форума, поэтому для кого-то она уже будет знакома. А тут я просто опишу ее возможности.

Библиотека работает посредством делегирования, она не вешает на каждый элемент события, а слушает лишь один у корневого элемента. Что позволяет использовать ее для динамично вставленных элементов. Отлавливает события вставки текста из буфера обмена (кроме FireFox, в котором нет реализации clipboardData).

Есть три основных атрибута с которыми она работает и по которым определяет свои действия:

data-let-input
Позволяет указать какие данные разрешено вводить в текстовое поле. Тут вы можете указать регулярное выражение в котором будет собран набор разрешенных символов.
Пример:
/^[0-9.]$/ // разрешено вводить только числа и знак точка
/^[a-z]$/i // разрешено вводить только латиницу, любого регистра
// и т.д.
data-let-template
Более сложный атрибут, тут нужно указать шаблон вводимых данных регулярными выражениями. И к сожалению тут нужно учитывать некие правила. Правила заключаются в том что шаблон должен иметь структуру псевдо-проверки. Например мы хотим разрешить вводить номер телефона, в формате 123-45-67. Для этого придется написать не просто обычную регулярку вида:
/^\d{3}-\d{2}-\d{2}$/
а немного иную, так как проверка будет происходить постепенно а не полным фрагментом текста, придется это учесть и писать регулярное выражение вида:
/^(|\d{1,3}|\d{3}-\d{0,2}|\d{3}-\d{2}-\d{0,2})$/
Тот кто понимает регулярные выражения, думаю поймут что было сделано в этом регулярном выражении. Происходит тут следующее, регулярное выражение указывает что валидной является пустая строка и частичные строки вида: "1", "12", "123", "123-", "123-4", "123-45", "123-45-", "123-45-6", "123-45-67". Одним словом собираем строку по кусочкам.
data-let-length
Этот атрибут является альтернативой атрибута maxlength, его поведение идентично. И реализовано оно лишь для браузера IE и Opera, в которых атрибут maxlength не реагирует на элемент TEXTAREA.

Это три встроенных атрибута которые библиотека обрабатывает по умолчанию. Но есть возможность добавить собственные атрибуты для обработки. С помощью которых, вы легко сможете расширить функционал библиотеки. Делается это очень просто. При загрузке библиотеки, в глобальном пространстве появляется объект с именем letJS. Это не конструктор а обычный объект, имеющий метод setHandler в качестве первого параметра имя атрибута или массив имен атрибутов и в качестве второго параметра функция обработчик.
Вот небольшой пример:

letJS.setHandler('data-let-phone', function(event, unchanged) {
    if (!this.value) {
        this.value = event.rule;
    }
    if (unchanged) {
        if (event.type === 'blur') {
            if (this.value === event.rule) {
               this.value = '';
            }
            return;
        } else {
            this.focus();
        }
    } else if (event.insertValue) {
        var parts = event.insertValue.split('');
        for(var i = 0; i < parts.length; i++) {
            this.value = this.value.replace(/^([^_]+)_/, '$1' + parts[i]);
        }
    } else if (event.cropValue) {
        this.value = this.value.replace(/(\+7.*)\d([^\d]*)$/, '$1_$2');
    }
    var pos = this.value.indexOf('_');
    event.selection(pos > 0 ? pos : this.value.length);
    return false;
});

Тут я написал небольшой плагинчик, реализующий проверку ввода телефонного номера, в тег мы помещаем атрибут со значением вида (+7 (___) ___-__-__):

<input type="text" data-let-input="/^[0-9]+$/" data-let-phone="+7 (___) ___-__-__" placeholder="Ваш номер телефона" />

Все очень просто. Если нужно убрать обработчик, достаточно передать null вместо функции, пример:

letJS.setHandler('data-let-phone', null);

А теперь расскажу что получает функция обработчик и как/для чего это нужно использовать.

Функция получает два входных параметра, причем первый основной, а второй вспомогательный, лишь для некоторых нужд.

Первый параметр имеет объект со свойствами:

originalEvent
Объект Event, оригинальный объект пойманного события

type
Тип пойманного события

attr
Какой атрибут сейчас получил обработку, нужно если вы один обработчик вешаете на несколько атрибутов

rule
Тут находит значение атрибута attr

target
Элемент на котором поймали событие

selection
Это функция позволяющая указать куда установить каретку курсора, имеет два параметра, первый start(стратовая позиция), второй end(конечная позиция).

value
Текущее значение в элементе над которым манипулируем.

insertValue
Значение которое хотят вставить в наше поле ввода

cropValue
Значение которое хотят вырезать из нашего поля ввода

expectedValue
Ожидаемое значение, то есть то, которое получится в результате после манипуляций.

regExp
Тут хранится объект RexExp в случае если в атрибуте было указано значение в виде регулярного выражения, в противном случае null

insertStart
Стартовая позиция каретки, указывающей на то, от начала какого символа будет вставлено новое значение.

insertEnd
Конечная позиция каретки, указывающей на то, до начала какого символа будет вставлено новое значение.

cropStart
Стартовая позиция каретки, указывающей на то, от начала какого символа будет вырезано значение.

cropEnd
Конечная позиция каретки, указывающей на то, до начала какого символа будет вырезано значение.

Второй параметр это просто булевое значение, которое имеет true в том случае если в поле ввода ничего не меняли, а просто сместили каретку на другую позицию.

--------------------------------------------------------------------

Пока на этом все. Скачать как обычно все можете у меня на гите: https://github.com/devote/letJS

Вопросы, пожелания пишем! Всем спасибо!