Предлагаю для использования/обсуждения сиситему маскИрованного ввода информации для HTML форм.
Т.е. ввод данных осуществляется по задданной маске, на подобии как в MaskEdit в C++Builder.

система тестировалась на IE6, Opera 9.10, FF 2.0.0.3

Пример использования

Задание маски:
Используйте следующие специальные символы:
‘`’ – на месте этого символа должна быть цифра (этот символ можно получить нажатием клавиши ‘ё’, при латинской раскладке);
'~' – только русская буква;
'_'- любой символ;

Например, маска для ввода телефона будет выглядеть так:

var mask = ‘(```)```-``-``’;

Назначение проверки:
Разместите на странице поле ввода с уникальным ID:



В обработчик window.onload (или в любой другой, в зависимости от конкретного случая) добавьте строку:


В CSS страницы включить:


Так же есть статья на эту тему:
http://www.maxaman-soft.ru/content/view/26/67/

Готовится к выходу вторая более продуманная версия.
Буду рад, отзывам, предложениям. Надеюсь система будет полезна.



ИСТОРИЯ ВЕРСИЙ
operatedInput v0.2.1
operatedInput v0.2.3
operatedInput v0.2.7
operatedInput v0.2.8 (ДЛЯ ПРИМЕНЕНИЯ)

Это сообщение отредактировал(а) Alex_B - 14.5.2007, 12:15

Присоединённый файл ( Кол-во скачиваний: 71 )
 operatedInput001.zip 1,20 Kb

При просмотре кода обратил внимание на такие конструкции (function doRule -> switch statement):

Дело в том, что return прерывает выполнение самой функции. Стоит ли после этого пытаться сделать что-то еще? Думаю, что нет.
Вот такие операции:

, как мне кажется, можно выполнять на более примитивном уровне:

Ну а document.all "люди-энциклопедии" вообще советуют избегать - Avoid document.all
Надеюсь пригодится для "второй, более продуманной версии". 

AKS,  спасибо. Ценные замечания, обязательно учту.

Насчет document.all. Это применяется как раз для идентификации IE. Т.е. заведомо изывестно, что document.all применять в других браузерах нельзя

Я имел ввиду вот эту строку:

, в которой можно было бы также обойтись бинарным логическим оператором ИЛИ:

Мне кажется, что так оптимальней. А ссылку я уж так, на "всякий"...
Кстати, неплохо было бы во второй версии использовать методы attachEvent/addEventListener. IE это будет "по душе", если, конечно, сделать функцию check внешней - во избежание memory leaks...

Кстати, не объясните, в чём глубокий плюс attachEvent в сравнении с присваиванием как свойству (объект.onclick=finction()...;)?

1. По - моему лучше в атрибутах держать правила.
Что - то типа

ну и потом смотреть элементы с атрибутом rule.

2. Почему RegExp не использовали? Зачем нужно было писать свой парсер?

На мой взгляд преимущество очевидно - такой подход (использование attchEvent/addEventListener) предоставляет шанс другим скриптам обрабатывать те же события на том же элементе без "оглядки" на данный сценарий ("а нет ли уже у элемента св-ва, которое я вдруг перепоределю и все сломаю?") . Использование этих методов - это своего рода "жест доброй воли" с нашей с вами стороны, ведь таким образом мы признаем, что мы не единственные, кому может понадобиться обработать события (в данном случае на текстовом поле). 
Вот небольшой пример того, что будет проще:

Вот это я должен написать ("как истинный джентельмен"), чтобы учесть возможно появления вашего сценария на странице перед моим. Или же я могу сделать проще:

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


Это сообщение отредактировал(а) AKS - 3.5.2007, 04:48

Как истинный джентельмн вы должны были написать больше  Потому, что совсем не обязательно fn будет функцией, вполне вероятно, что он - строка, которую следует передать eval'у. 
Минус Attach event'а в том, что требуется бороться с memory leak'ами в IE, так что код в простых случаях неоправданно возрастает... 


Это сообщение отредактировал(а) ksnk - 3.5.2007, 09:22

Во! Лучшее, что я мог ожидать в ответ на свое предположение, что  "el.attachEvent - так проще". 
А что за "темная история" со строкой в св-ве, которую нужно передать eval'у?

С утечками памяти бороться придется в любом случае (если мы - "истинные джентельмены" ;) ), а метод attachEvent к ним отношения не имеет (т.е. не он виновник). Об утечках пишут многие "дяди", но ни один не "обвинил" в этом attachEvent. Давайте еще раз вместе почитаем, что такое memory leaks, а то ведь, не дай бог, тут люди прочтут и скажут, что я чего-то плохого насоветовал:
The Internet Explorer Memory Leak Problem 
Understanding and Solving Internet Explorer Leak Patterns
DHTML Leaks Like a Sieve
Javascript memory leaks

 Вот у такого A , onclick будет не функцией


Я заметил некую однобокость в предъявленных статьях. Все примеры там связаны с явной генерацией циклических ссылок. Вот  еще одна. Там описан немного другой способ генерировать всякий лишний мусор   .
Хочется заметить, что при использовании AttachEvent'а значительно чаще используются анонимные функции


Это сообщение отредактировал(а) ksnk - 3.5.2007, 16:10

В каком браузере?

AKS, Oops! Про строки - я нагнал :( Очередной рецидив "бытовой логики"... Только что проверил, во всех доступных мне броузерах такие строки становятся анонимными функциями сами...

  

Ага, так это тот же самый Ksnk, только без заглавной!    А я думаю: "Наверно не тот - чего-то тут с маленькой"...  
Приветствую на этом форуме!

Alex_B, 
S.A.P., задал правильный вопрос. Почему не использовались RegExp'ы? C ними весь код сократился бы раза в 3-4... 
  
AKS, Приветствую! Мы, традиционно, уводим обсуждение куда-то в сторону 

operatedInput v0.2.1
(для тестирования)

Изменения:
Добавлена возможность экранирования символов маски.
Существенно переработана логика.
Избавился от рекурсии.
Учтены замечания AKS.
Изменены специальные символы.(для большей похожести на MaskEdit в C++Builder)

'/' - эранирование последующего символа
'0' - на месте этого символа должна быть цифра
'R' - на месте этого символа должна быть русская буква


Зачем нужно эранирование?
В случаи если вам необходимо вывести символ маски в поле ввода, а этот символ является специальным поставьте перед ним экран:

Т.е. все кода телефонных намеров начинаются с нуля: (095)123-23-23 или (022)223-33-11 и т.д.


ToDo List:
Из-за экранировая появилась проблема со стирание введенных символов. Проблема чисто логическая, которую я попытался изложить здесь.
Она сейчас решена дуболомным способом - ведение двух(!) массивов в которые записывается история добавления символов.
(Есть еще и блок-схема, возможно кому-то будет интересно)
Сам код на мой взгляд требует серьезной оптимизации, чего только стоит: if(navigator.appName.indexOf("Opera")!=-1){idel -=1;}
Согласен со всеми что необходимо использовать attachEvent.

Как только выше изложенное разрешится нужно будет составить и реализовать нужные правила, сейчас их только два: '0' - на месте этого символа должна быть цифра и 'R' - на месте этого символа должна быть русская буква.

Добавлено через 11 минут и 30 секунд

1/Хотелось максимально отделить логику от представления. В идеале HTML разметка вобще недолжна содеражать информацию не относящуюся к отображению на экране 

>Почему RegExp не использовали? Зачем нужно было писать свой парсер?
символ всегда анализируется один, его вроде и так легко проверить.

>S.A.P., задал правильный вопрос. Почему не использовались RegExp'ы? C ними весь код сократился бы раза в 3-4...
ksnk, было бы неплохо - тем более, что теперь он разросся до небес. А можно пример.

Это сообщение отредактировал(а) Alex_B - 4.5.2007, 18:09

Присоединённый файл ( Кол-во скачиваний: 42 )
 operatedInput021.zip 1,77 Kb

Пожелание. Выкладывайте, pls, работоспособный HTML, который может продемонстрировать работу скрипта. Заставлять народ напрягаться и генерировать нетривиальный тестовый стенд - нечеловеколюбиво ;) Вот, вредный Я придумал такой пример   

Из багов, которые бросились в глаза.

• Del в FF не работает
• после Del в IE нельзя вставить ничего

 "Автозаполнение" - штука, над которой нужно подумать, простыми Reg'ами не сделать, так что пока - посмотрим / подумаем 

О! про дел я вообще забыл...

Вообще, кажется, что отдельно такая фенечка не очень интересна. Ее нужно собирать в комплекте с каким-нибудь ToolTip'ом, чтобы демонстрировать ошибки ввода не калеча дизайн...

Совершенно согласен.
ToolTip отложил до лучших времен. Функция вывода подскаски вынесена отдельно её будет легко заменить.


Я тут подумал вот о чем:
насколько необходимо эранирование?


Слишком ного оно геморая вызывает. Может вообще от него отказаться? Зарезервировать несколько символов как специальные.
И тогда все будет очень просто - никаких ведений историй, никаких массивов, проблем со стиранием backspace и del.

Останется только ToolTip прикрутить да пару тройку правил добави


И тогда вопрос:
Какие правила нужны?
(может их будет порядка пяти, тогда я думаю можно будет найти зянять несколько символов как специаяльные без потери функциональности)

Пока вижу 4 правила:
-только цифра
-только буква
-только русская буква
-верхний регистр, возможен автоматический перевод в вверхний регистр. (например для первой буквы в поле для ввода фамилии)

Это сообщение отредактировал(а) Alex_B - 4.5.2007, 20:55

Alex_B, у меня нет, к сожалению, ответов на ваши концептуальные вопросы, но вот по коду кое-что есть. Вы так и оставили функцию check внутренней по отношению operatedInput. А ведь возможно же, что кому-то захочется вызвать operatedInput несколько раз для разных текстовых полей? Если такое произойдет - при каждом вызове будет создаваться новая функция check (своя, так сказать, для каждого поля). А зачем?

AKS, спасибо!

Не знаю, насколько это будет интересно, но вот кусочек документации из довольно прилично развитой системы "шаблонного" ввода. Тут только placeholder'ы для цифр...

Еще не страшно?   

ksnk, такая документация и уменя самого есть.   

Вопрос в том, что конкретно может понадобиться для веба?
(вводить телефон, номер паспорта, ФИО - для этого вполне хватит и 4-х правил, которые написаны выше)

Alex_B, Для веба может понадобится все... Деньги, числа (вещественные, в том числе; в разной локали, о ужас!!!), даты ...
Впрочем - делать сразу "на все" - не разумно... Нужно обеспечить достаточно гибкую расширяемость, имея ввиду потенции "больших" систем, и сделать маленькое подмножество, нужное конкретно сейчас. 

Некоторые данные могут бросаться copy-paste'ом, так что гарантировать корректность ввода "побуквенно" - не выйдет.

ksnk, да... проблема..
Я сейчас попробовал как это сделано у Borland, там если copy-paste'ом встявлять подходящие символы, они вставляются. Если не подходящие, то курсор ввода сдвигается на число вводимых символов но на их местах остаются пробелы.

Как вариант, можно вообще запретить copy-paste.

Это сообщение отредактировал(а) Alex_B - 5.5.2007, 20:21

А может вместо запрета попытаться обработать событие onchange? Проверить регэкспом и оставить лишь валидный фрагмент строки (т.е. кусок строки до первого несоответствия).

AKS, можете предложить вариант регескпа, который с одной строны не был бы велик и ужасен по размеру. а с другой стороны обеспечиват проверку валидности как всей строк , так и "выкусывание" валидных частей... 

Вряд ли для этого подойдет Regexp. Скорее всего придется городить свой парсер, как вот здесь.

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

operatedInput v0.2.3
(для тестирования)

Изменения:
(по сравнению с operatedInput v0.2.1)
Добавлена функция searchMaskShant поиска позиции курсора в маске по количеству символов в поле ввода.
Значит проблема удаления символов клавишей Backspace решена. В связи с этим больше нет ведения историй и двух массивов.
Кода стало меньше, логика упростилась

По замечанию ksnk, что система должна быть гибкой и легко расширяемой, экранирование сохранено.

ToDo List
Необходимо вынести функцию check из функции operatedInput (рекомендация AKS).
Решить вопрос стирания клавишей del, ровно, как и ввод символа не в конец строки в поле ввода. Для этого необходимо узнать местоположение курсора в поле ввода и передать его функции searchMaskShant.


Это сообщение отредактировал(а) Alex_B - 6.5.2007, 13:57

Присоединённый файл ( Кол-во скачиваний: 13 )
 operatedInput023.zip 1,50 Kb

Не вдаваясь сильно в логику приложения, переписал, действительно учитывая пожелания звучавшие в этой ветке  


Это сообщение отредактировал(а) ksnk - 6.5.2007, 18:39

Присоединённый файл ( Кол-во скачиваний: 34 )
 operatedinput.zip 2,49 Kb

К сожалению скрипт ksnk унаследовал все недостатки, и рабочим его назвать нельзя.

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

Это сообщение отредактировал(а) Alex_B - 7.5.2007, 22:38

Да, я подумал над юзабельностью, и увидел большой недостаток: о шаблонах разговор есть, а шаблона юзеру не видно. Его можно, конечно, написать рядом, но это прошлый век в скриптах. Лучше сделать поле, очень похожее на ввод, чтобы не пришлось объяснять. Наводит юзер на него - там высвечивается шаблон. Кликнул на цифру - замигал курсор или подчёркивание (всё на стилях и таймере). И шаблон цифры продолжает подсвечиваться, только бледно, чтобы не забыл, что цифру надо ввести. Ввёл - фон белый под цифрой, а курсор на следующем допустимом для ввода символе. Затирания (по document.onkeyup), стрелки и delete эмулируются, мышью переходим на цифры. Чтобы при наведении в поле появилось примерно вот это:Тогда понятно будет, что ввод по шаблону.

Это сообщение отредактировал(а) 12345c - 8.5.2007, 16:29

12345c, Такая техника ("выпячивание" шаблона ввода) где-нибудь (не обязательно в WEB- проекте) используется? Если да, то можно какие-нибуь названия - ссылки? Я такого не встречал 


Alex_B, Мой скрипт был не исправлением логики парсера, а скорее демонстрацией принципа "гибкости". Парсер ввода - отдельно, тултип - отдельно. И еще для полноты картины - возможность множественных полей ввода на страничке. Если что-то понравилось, я буду рад, если это что-то появится/останется и в следующих версиях скрипта  
 Ждем'с   

ksnk, спасибо, только воспользоваться я кодом пока не могу, он сложен для меня, разбираться пока не стал.

"выпячивание" это как раз нормальное явление, в C++Builder MaskEdit (откуда и пришла сама идея) как раз сделано "выпячивание". И в поле ввода всегда выделено место куда будет вводится символ. Т.е. всегда происходит замена символа в поле на вводимый. 
Вот это и есть новый принцип: что бы пользователь ни нажимал (смивол, цифра, del, backspace) всегда должна происходить только замена выделенного символа.

ksnk, в бланках заполнения всяких банковских квитанций, личных данных в билетах (авиа), где нужно чётко по шаблону прописать данные, чтобы понять могли самые разные культуры и люди.

Далее, в Ворде каким-то образом составляют бланки, в которых можно писать в строго заданных полях (правда, что угодно, если только скрипты (макросы) не использовать.


Alex_B, > смивол, цифра, del, backspace
не совсем так - последние 2 клавиши всеми понимаются как управляющие, поэтому нормально, если поле от них очистится, а курсор передвинется назад.

operatedInput v0.2.7


Изменения:
-Полностью переработана логика.
-Наконец то появилась функция синхронизирующая маску с полем ввода, т.е. одному символу в поле ввода соответствует один символ в синхронизированной маске. Это сильно упрощает поиск правила для вводимого символа (visualizationMask).
-Так как пользователь может захотеть ввести символ не только в конец поля ввода, а и куда-нибудь посередине, добавлено отслеживание курсора ввода.
-Del и Beckspace работают корректно
-Возможно перемещение курсора ввода стрелками или мышкой (теперь это не вызывает сбоев как раньше)
-Предусмотрено получение фокуса кнопкой Tab.(выделяется все поле – после попытки ввести символ - курсор ввода ставится на первую позицию для ввода)
-Маска ввода теперь видна. Специальные символы в ней заменяются указанным разработчиком символом.

Способ применения:

mask – уникальный ID поля ввода;
(/000)000-00-00 – маска ввода
Третий аргумент функции _ - символ замены специальных символов для визуализации маски

Пример использования:



ToDo List
Это как раз тот случай когда код вышел из под контроля. Много повторяющихся кусков. Но это не самое страшное.
Курсор ввода теперь – это выделенный символ в поле ввода. После ввода очередного символа, это выделение сдвигается вправо. Этот сдвиг происходит по событию onkeyup. Вот это и есть проблема – если быстро и бездумно давить на клавиши, то курсор ввода не успевает переместиться и система дает сбой.



ПРОСЬБА:
Прошу помочь разобраться с описанной выше проблемой. Нужно как-то изменить функцию проверки ввода, а именно найти способ как передвинуть курсор ввода не по событию onkeyup.
Вот этот кусок кода:


Возможно, есть какой-то другой способ, например, запретить ввод, если в поле ввода нет выделения?? Буду благодарен за идею.
(сделаем крутую систму, все подпишимся и будет  good  )

Это сообщение отредактировал(а) Alex_B - 14.5.2007, 12:21

Присоединённый файл ( Кол-во скачиваний: 35 )
 operatedInput027.zip 2,77 Kb

Кое-кто говорил, что мой код слишком сложен . 
На правах идеи - по onkeydown сохранять предыдущее значение value, по onkeyup - измененное. Если последнее не подходит - ругаемся. Никаких selection'ов и и прочей странной магии. По разнице введенных данных и с учетом маски можно понять (надеюсь) что-же было введено.

Ну чтоб ввод был совсем уж управляемый, можно "съесть" keyCode, а символ(ы) вставить(удалить) самому

Добавлено через 10 минут и 47 секунд

ещё недоработка:
при нажатии ctrl/shift (или при переключении раскладки), 
сообщения об ошибке не приходит, но курсор перемещается на следующий символ

operatedInput v0.2.8
(РАБОЧАЯ)

Изменения:
По сравнению с operatedInput v0.2.7
-Добавлена корректная работа с быстрым и бездумным давлением на клавиши – система не дает сбоя.
-Добавлена корректное выполнение нажатий ctrl/ shift /переключении раскладки/ tab

Поддерживаются следующие специальные символы для задания маски:
0 – только цифра
R – только русская буква
/ - экранирование символа

Пример использования такой же как и operatedInput v0.2.7

ToDo List
Версия рабочая и пригодна для использования, однако требуются изменения – добавить правил, подсказку оформить как tooltip, возможно привести код в порядок.

Это сообщение отредактировал(а) Alex_B - 14.5.2007, 12:22

Присоединённый файл ( Кол-во скачиваний: 216 )
 operatedInput028.zip 2,82 Kb

Действительно, работает.  Не без приглючений, правда. Из оставшихся багов накопалось пока:

• copy-paste. Можно вставить что-нибудь в поле безнаказанно. Может, по onBlur тоже проверять?
• Нет разумной возможности очистить поле ввода.
• Нет возможности отметить поле ввода и скопировать его

 

>Нет разумной возможности очистить поле ввода.
А как должна выглядеть разумная очистка ввода?
Сейчас можно стирать Backspace  и del

>Нет возможности отметить поле ввода и скопировать его
Я и не думал, что это может понаджобиться. Спасибо за идею.

>copy-paste. Можно вставить что-нибудь в поле безнаказанно. Может, по onBlur тоже проверять?
А вот тут сложная задача...

 Иногда хочется не вводить в поле ничего. Обычно это делается кнопкой Del на полностью выделенном поле  Сейчас этого сделать нельзя. 

Поиск MaskEdit'а в интернете дал тот факт, что в
проекте Tapestry (некий фреймворк для разработки WEB приложений) содержится MaskEdit для input'а. Препарирование сего проекта дало вот этот код.
Ногами - не бить , моего тут - только HTML.   

Присоединённый файл ( Кол-во скачиваний: 85 )
 MaskEdit.zip 3,82 Kb

В опере не работает, в IE блокирует как потенциально опасное содержимое

Я не хочу сказать, что это крутой продукт  , однако кое-какие решения вполне можно оттуда позаимствовать. 
А вот про потенциально опасное содержимое поподробнее можно? Вроде ничего, кроме обычного javascript'а там нет.

а может и нет  , я его открыл в  IE и браузер его заблокировал- сверху такая полска появилась "Разрешить заблокированное содержимое которое потенциально опасно" (по его мнению)

 Угу. Это - обычная паранойя IE   
В заголовке скрипта стоит дата его создания - 2002 год. Это несколько объясняет довольно прямолинейный (по нынешним временам) стиль...


Это сообщение отредактировал(а) ksnk - 14.5.2007, 22:39

 
backspace/delete в отличие от о стальных могут залипать и не только стирают всё, но и приводят к зависанию

Почему развитие проекта приостановлено?

Кстати вот уже нашёл и немного подправил скрипт, делающий похожее, но возник ряд ошибок, которых не могу разрешить...
Помогите, ведь есть возможность сделать действительно полезную работающую систему.
http://forum.vingrad.ru/forum/topic-153144...sk-firefox.html

Приятно удивило.

http://www.asp.net/AJAX/AjaxControlToolkit...MaskedEdit.aspx

http://digitalbush.com/projects/masked-input-plugin  - я в шоке, все просто и красиво

вот пример


Это сообщение отредактировал(а) yarbala - 29.5.2008, 16:50