Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2013, 11:32
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Мини библиотека для контроля ввода текста в 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

Вопросы, пожелания пишем! Всем спасибо!
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 21.03.2014 в 12:16.
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2013, 11:32
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

reserved
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #3 (permalink)  
Старый 09.04.2013, 18:36
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от devote
Я уже упоминал о ней в некоторых топиках этого форума
видели

Любопытства ради: зачем в коде работа с выделением? https://github.com/devote/letJS/blob/master/let.js#L23
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #4 (permalink)  
Старый 09.04.2013, 21:21
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от nerv_
Любопытства ради: зачем в коде работа с выделением?
по большей части оно используется для того что бы получить текущею позицию каретки. А точнее только для этого и используется. Хотя изначально планировал отлавливать работу drag'n'drop, там нужно было как восстановление позиции каретки, так и восстановление выделения. Ну и конечно же получение текущих координат.

Но увы drag'n'drop идеально реализован лишь в двух браузерах, это Internet Explorer (дабы в нем он уж сто лет) и Opera... Остальные браузеры мне побороть пока не удалось, в них увы ни в какую не узнать того в какую часть текста хотят вставить фрагмент принесенный мышкой. То есть нужно получить координаты до того как его вставили (но этого не сделать в браузерах Chrome, FF, Safari). О Safari вообще другой разговор, в нем у меня событие drop не работает ни в какую.

Если есть идеи или желание допилить drag'n'drop буду рад любым идеям.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2013, 11:24
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

понятно, спасибо!

Сообщение от devote
О Safari вообще другой разговор, в нем у меня событие drop не работает ни в какую.
идей нет
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #6 (permalink)  
Старый 21.03.2014, 12:13
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Внес небольшие изменения в библиотеку. Читайте выше
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Копирование из textarea в input Brook Events/DOM/Window 2 03.05.2012 12:58
Положение курсора в строке обычного HTML текста (НЕ input и textarea) Murmurianez Общие вопросы Javascript 19 23.06.2011 22:45
Вставка данных в textarea из модального окна (для Markitup) Roman Koff jQuery 0 26.08.2010 22:21
Подсчет "реальной" длины текста в textarea modernx Элементы интерфейса 22 06.06.2010 17:30
Форма для ввода текста с расширенными функциями 0x22b Элементы интерфейса 0 01.09.2008 09:38