| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > JavaScript: Наши скрипты > Управляемый ввод |
| Автор: Alex_B 2.5.2007, 17:14 | ||||||
| Предлагаю для использования/обсуждения сиситему маскИрованного ввода информации для 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/ Готовится к выходу вторая более продуманная версия. Буду рад, отзывам, предложениям. Надеюсь система будет полезна. ИСТОРИЯ ВЕРСИЙ http://forum.vingrad.ru/index.php?showtopic=149225&view=findpost&p=1122196 http://forum.vingrad.ru/index.php?showtopic=149225&view=findpost&p=1123704 http://forum.vingrad.ru/index.php?showtopic=149225&view=findpost&p=1131333 http://forum.vingrad.ru/index.php?showtopic=149225&view=findpost&p=1132465 (ДЛЯ ПРИМЕНЕНИЯ) |
| Автор: AKS 2.5.2007, 18:30 | ||||||
При просмотре кода обратил внимание на такие конструкции (function doRule -> switch statement):
Дело в том, что return прерывает выполнение самой функции. Стоит ли после этого пытаться сделать что-то еще? Думаю, что нет. Вот такие операции:
, как мне кажется, можно выполнять на более примитивном уровне:
Ну а document.all "люди-энциклопедии" вообще советуют избегать - http://www.javascripttoolbox.com/bestpractices/#all Надеюсь пригодится для "второй, более продуманной версии". |
| Автор: Alex_B 2.5.2007, 18:41 |
| AKS, спасибо. Ценные замечания, обязательно учту. Насчет document.all. Это применяется как раз для идентификации IE. Т.е. заведомо изывестно, что document.all применять в других браузерах нельзя |
| Автор: AKS 2.5.2007, 20:01 | ||||
Я имел ввиду вот эту строку:
, в которой можно было бы также обойтись бинарным логическим оператором ИЛИ:
Мне кажется, что так оптимальней. А ссылку я уж так, на "всякий"... Кстати, неплохо было бы во второй версии использовать методы attachEvent/addEventListener. IE это будет "по душе", если, конечно, сделать функцию check внешней - во избежание memory leaks... |
| Автор: S.A.P. 2.5.2007, 21:30 | ||
| 1. По - моему лучше в атрибутах держать правила. Что - то типа
ну и потом смотреть элементы с атрибутом rule. 2. Почему RegExp не использовали? Зачем нужно было писать свой парсер? |
| Автор: AKS 3.5.2007, 04:25 | ||||||
На мой взгляд преимущество очевидно - такой подход (использование attchEvent/addEventListener) предоставляет шанс другим скриптам обрабатывать те же события на том же элементе без "оглядки" на данный сценарий ("а нет ли уже у элемента св-ва, которое я вдруг перепоределю и все сломаю?") . Использование этих методов - это своего рода "жест доброй воли" с нашей с вами стороны, ведь таким образом мы признаем, что мы не единственные, кому может понадобиться обработать события (в данном случае на текстовом поле). Вот небольшой пример того, что будет проще:
Вот это я должен написать ("как истинный джентельмен"), чтобы учесть возможно появления вашего сценария на странице перед моим. Или же я могу сделать проще:
Так проще, на мой взгляд. Однако я допускаю, что мне что-либо не известно, а поэтому мое мнение вполне может оказаться ошибочным. |
| Автор: ksnk 3.5.2007, 09:21 |
Как истинный джентельмн вы должны были написать больше Минус Attach event'а в том, что требуется бороться с memory leak'ами в IE, так что код в простых случаях неоправданно возрастает... |
| Автор: AKS 3.5.2007, 15:28 | ||
Во! Лучшее, что я мог ожидать в ответ на свое предположение, что "el.attachEvent - так проще". А что за "темная история" со строкой в св-ве, которую нужно передать eval'у?
С утечками памяти бороться придется в любом случае (если мы - "истинные джентельмены" ;) ), а метод attachEvent к ним отношения не имеет (т.е. не он виновник). Об утечках пишут многие "дяди", но ни один не "обвинил" в этом attachEvent. Давайте еще раз вместе почитаем, что такое memory leaks, а то ведь, не дай бог, тут люди прочтут и скажут, что я чего-то плохого насоветовал: http://www.jibbering.com/faq/faq_notes/closures.html#clMem http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp http://jgwebber.blogspot.com/2005/01/dhtml-leaks-like-sieve.html http://www.quirksmode.org/blog/archives/2005/02/javascript_memo.html |
| Автор: ksnk 3.5.2007, 16:08 | ||||
Я заметил некую однобокость в предъявленных статьях. Все примеры там связаны с явной генерацией циклических ссылок. http://www.bazon.net/mishoo/articles.epl?art_id=824. Там описан немного другой способ генерировать всякий лишний мусор Хочется заметить, что при использовании AttachEvent'а значительно чаще используются анонимные функции |
| Автор: AKS 3.5.2007, 16:24 | ||
В каком браузере? |
| Автор: ksnk 3.5.2007, 16:46 |
| AKS, Oops! Про строки - я нагнал :( Очередной рецидив "бытовой логики"... Только что проверил, во всех доступных мне броузерах такие строки становятся анонимными функциями сами... |
| Автор: AKS 3.5.2007, 17:02 |
| Ага, так это тот же самый Ksnk, только без заглавной! Приветствую на этом форуме! |
| Автор: ksnk 3.5.2007, 17:15 |
| Alex_B, S.A.P., задал правильный вопрос. Почему не использовались RegExp'ы? C ними весь код сократился бы раза в 3-4... AKS, Приветствую! Мы, традиционно, уводим обсуждение куда-то в сторону |
| Автор: Alex_B 4.5.2007, 18:04 | ||||||
| operatedInput v0.2.1 (для тестирования) Изменения: Добавлена возможность экранирования символов маски. Существенно переработана логика. Избавился от рекурсии. Учтены замечания AKS. Изменены специальные символы.(для большей похожести на MaskEdit в C++Builder) '/' - эранирование последующего символа '0' - на месте этого символа должна быть цифра 'R' - на месте этого символа должна быть русская буква Зачем нужно эранирование? В случаи если вам необходимо вывести символ маски в поле ввода, а этот символ является специальным поставьте перед ним экран:
Т.е. все кода телефонных намеров начинаются с нуля: (095)123-23-23 или (022)223-33-11 и т.д. ToDo List: Из-за экранировая появилась проблема со стирание введенных символов. Проблема чисто логическая, которую я попытался изложить http://forum.vingrad.ru/forum/topic-148858/kw-маскированный-ввод-маска-управляемый.html. Она сейчас решена дуболомным способом - ведение двух(!) массивов в которые записывается история добавления символов. (Есть еще и блок-схема, возможно кому-то будет интересно) Сам код на мой взгляд требует серьезной оптимизации, чего только стоит: if(navigator.appName.indexOf("Opera")!=-1){idel -=1;} Согласен со всеми что необходимо использовать attachEvent. Как только выше изложенное разрешится нужно будет составить и реализовать нужные правила, сейчас их только два: '0' - на месте этого символа должна быть цифра и 'R' - на месте этого символа должна быть русская буква. Добавлено через 11 минут и 30 секунд
1/Хотелось максимально отделить логику от представления. В идеале HTML разметка вобще недолжна содеражать информацию не относящуюся к отображению на экране >Почему RegExp не использовали? Зачем нужно было писать свой парсер? символ всегда анализируется один, его вроде и так легко проверить. >S.A.P., задал правильный вопрос. Почему не использовались RegExp'ы? C ними весь код сократился бы раза в 3-4... ksnk, было бы неплохо - тем более, что теперь он разросся до небес. А можно пример. |
| Автор: ksnk 4.5.2007, 19:13 | ||
Пожелание. Выкладывайте, pls, работоспособный HTML, который может продемонстрировать работу скрипта. Заставлять народ напрягаться и генерировать нетривиальный тестовый стенд - нечеловеколюбиво ;) Вот, вредный Я придумал такой пример
Из багов, которые бросились в глаза.
|
| Автор: Alex_B 4.5.2007, 19:35 | ||
О! про дел я вообще забыл... |
| Автор: ksnk 4.5.2007, 19:48 |
| Вообще, кажется, что отдельно такая фенечка не очень интересна. Ее нужно собирать в комплекте с каким-нибудь ToolTip'ом, чтобы демонстрировать ошибки ввода не калеча дизайн... |
| Автор: Alex_B 4.5.2007, 20:51 | ||
Совершенно согласен. ToolTip отложил до лучших времен. Функция вывода подскаски вынесена отдельно её будет легко заменить. Я тут подумал вот о чем: насколько необходимо эранирование? Слишком ного оно геморая вызывает. Может вообще от него отказаться? Зарезервировать несколько символов как специальные. И тогда все будет очень просто - никаких ведений историй, никаких массивов, проблем со стиранием backspace и del. Останется только ToolTip прикрутить да пару тройку правил добави И тогда вопрос: Какие правила нужны? (может их будет порядка пяти, тогда я думаю можно будет найти зянять несколько символов как специаяльные без потери функциональности) Пока вижу 4 правила: -только цифра -только буква -только русская буква -верхний регистр, возможен автоматический перевод в вверхний регистр. (например для первой буквы в поле для ввода фамилии) |
| Автор: AKS 5.5.2007, 07:49 |
| Alex_B, у меня нет, к сожалению, ответов на ваши концептуальные вопросы, но вот по коду кое-что есть. Вы так и оставили функцию check внутренней по отношению operatedInput. А ведь возможно же, что кому-то захочется вызвать operatedInput несколько раз для разных текстовых полей? Если такое произойдет - при каждом вызове будет создаваться новая функция check (своя, так сказать, для каждого поля). А зачем? |
| Автор: Alex_B 5.5.2007, 12:43 |
| AKS, спасибо! |
| Автор: ksnk 5.5.2007, 15:18 | ||
Не знаю, насколько это будет интересно, но вот кусочек документации из довольно прилично развитой системы "шаблонного" ввода. Тут только placeholder'ы для цифр...
Еще не страшно? |
| Автор: Alex_B 5.5.2007, 17:59 |
| ksnk, такая документация и уменя самого есть. Вопрос в том, что конкретно может понадобиться для веба? (вводить телефон, номер паспорта, ФИО - для этого вполне хватит и 4-х правил, которые написаны выше) |
| Автор: ksnk 5.5.2007, 18:41 |
| Alex_B, Для веба может понадобится все... Деньги, числа (вещественные, в том числе; в разной локали, о ужас!!!), даты ... Впрочем - делать сразу "на все" - не разумно... Нужно обеспечить достаточно гибкую расширяемость, имея ввиду потенции "больших" систем, и сделать маленькое подмножество, нужное конкретно сейчас. Некоторые данные могут бросаться copy-paste'ом, так что гарантировать корректность ввода "побуквенно" - не выйдет. |
| Автор: Alex_B 5.5.2007, 20:20 |
| ksnk, да... проблема.. Я сейчас попробовал как это сделано у Borland, там если copy-paste'ом встявлять подходящие символы, они вставляются. Если не подходящие, то курсор ввода сдвигается на число вводимых символов но на их местах остаются пробелы. Как вариант, можно вообще запретить copy-paste. |
| Автор: AKS 5.5.2007, 20:31 |
А может вместо запрета попытаться обработать событие onchange? Проверить регэкспом и оставить лишь валидный фрагмент строки (т.е. кусок строки до первого несоответствия). |
| Автор: ksnk 5.5.2007, 22:25 |
| AKS, можете предложить вариант регескпа, который с одной строны не был бы велик и ужасен по размеру. а с другой стороны обеспечиват проверку валидности как всей строк , так и "выкусывание" валидных частей... Вряд ли для этого подойдет Regexp. Скорее всего придется городить свой парсер, как вот здесь. |
| Автор: AKS 6.5.2007, 05:46 |
Нет, не могу. В регах у меня (как некоторые выражаются) "уровень: для самых маленьких". |
| Автор: Alex_B 6.5.2007, 13:50 |
| operatedInput v0.2.3 (для тестирования) Изменения: (по сравнению с http://forum.vingrad.ru/index.php?showtopic=149225&view=findpost&p=1122196) Добавлена функция searchMaskShant поиска позиции курсора в маске по количеству символов в поле ввода. Значит проблема удаления символов клавишей Backspace решена. В связи с этим больше нет ведения историй и двух массивов. Кода стало меньше, логика упростилась По замечанию ksnk, что система должна быть гибкой и легко расширяемой, экранирование сохранено. ToDo List Необходимо вынести функцию check из функции operatedInput (рекомендация AKS). Решить вопрос стирания клавишей del, ровно, как и ввод символа не в конец строки в поле ввода. Для этого необходимо узнать местоположение курсора в поле ввода и передать его функции searchMaskShant. |
| Автор: ksnk 6.5.2007, 18:34 |
| Не вдаваясь сильно в логику приложения, переписал, действительно учитывая пожелания звучавшие в этой ветке |
| Автор: Alex_B 7.5.2007, 22:38 |
| К сожалению скрипт ksnk унаследовал все недостатки, и рабочим его назвать нельзя. Сейчас вижу что идея реализации с самого начала не верна и не могла привести к полностью рабочей версии. Скоро будет готова новая версия, работающая по другому принципу. |
| Автор: 12345c 8.5.2007, 16:16 | ||
Да, я подумал над юзабельностью, и увидел большой недостаток: о шаблонах разговор есть, а шаблона юзеру не видно. Его можно, конечно, написать рядом, но это прошлый век в скриптах. Лучше сделать поле, очень похожее на ввод, чтобы не пришлось объяснять. Наводит юзер на него - там высвечивается шаблон. Кликнул на цифру - замигал курсор или подчёркивание (всё на стилях и таймере). И шаблон цифры продолжает подсвечиваться, только бледно, чтобы не забыл, что цифру надо ввести. Ввёл - фон белый под цифрой, а курсор на следующем допустимом для ввода символе. Затирания (по document.onkeyup), стрелки и delete эмулируются, мышью переходим на цифры. Чтобы при наведении в поле появилось примерно вот это:
|
| Автор: ksnk 8.5.2007, 19:47 |
| 12345c, Такая техника ("выпячивание" шаблона ввода) где-нибудь (не обязательно в WEB- проекте) используется? Если да, то можно какие-нибуь названия - ссылки? Я такого не встречал Alex_B, Мой скрипт был не исправлением логики парсера, а скорее демонстрацией принципа "гибкости". Парсер ввода - отдельно, тултип - отдельно. И еще для полноты картины - возможность множественных полей ввода на страничке. Если что-то понравилось, я буду рад, если это что-то появится/останется и в следующих версиях скрипта Ждем'с |
| Автор: Alex_B 8.5.2007, 20:11 |
| ksnk, спасибо, только воспользоваться я кодом пока не могу, он сложен для меня, разбираться пока не стал. "выпячивание" это как раз нормальное явление, в C++Builder MaskEdit (откуда и пришла сама идея) как раз сделано "выпячивание". И в поле ввода всегда выделено место куда будет вводится символ. Т.е. всегда происходит замена символа в поле на вводимый. Вот это и есть новый принцип: что бы пользователь ни нажимал (смивол, цифра, del, backspace) всегда должна происходить только замена выделенного символа. |
| Автор: 12345c 8.5.2007, 20:59 |
| ksnk, в бланках заполнения всяких банковских квитанций, личных данных в билетах (авиа), где нужно чётко по шаблону прописать данные, чтобы понять могли самые разные культуры и люди. Далее, в Ворде каким-то образом составляют бланки, в которых можно писать в строго заданных полях (правда, что угодно, если только скрипты (макросы) не использовать. Alex_B, > смивол, цифра, del, backspace не совсем так - последние 2 клавиши всеми понимаются как управляющие, поэтому нормально, если поле от них очистится, а курсор передвинется назад. |
| Автор: Alex_B 13.5.2007, 09:51 | ||||||
| operatedInput v0.2.7 Изменения: -Полностью переработана логика. -Наконец то появилась функция синхронизирующая маску с полем ввода, т.е. одному символу в поле ввода соответствует один символ в синхронизированной маске. Это сильно упрощает поиск правила для вводимого символа (visualizationMask). -Так как пользователь может захотеть ввести символ не только в конец поля ввода, а и куда-нибудь посередине, добавлено отслеживание курсора ввода. -Del и Beckspace работают корректно -Возможно перемещение курсора ввода стрелками или мышкой (теперь это не вызывает сбоев как раньше) -Предусмотрено получение фокуса кнопкой Tab.(выделяется все поле – после попытки ввести символ - курсор ввода ставится на первую позицию для ввода) -Маска ввода теперь видна. Специальные символы в ней заменяются указанным разработчиком символом. Способ применения:
mask – уникальный ID поля ввода; (/000)000-00-00 – маска ввода Третий аргумент функции _ - символ замены специальных символов для визуализации маски Пример использования:
ToDo List Это как раз тот случай когда код вышел из под контроля. Много повторяющихся кусков. Но это не самое страшное. Курсор ввода теперь – это выделенный символ в поле ввода. После ввода очередного символа, это выделение сдвигается вправо. Этот сдвиг происходит по событию onkeyup. Вот это и есть проблема – если быстро и бездумно давить на клавиши, то курсор ввода не успевает переместиться и система дает сбой. ПРОСЬБА: Прошу помочь разобраться с описанной выше проблемой. Нужно как-то изменить функцию проверки ввода, а именно найти способ как передвинуть курсор ввода не по событию onkeyup. Вот этот кусок кода:
Возможно, есть какой-то другой способ, например, запретить ввод, если в поле ввода нет выделения?? Буду благодарен за идею. (сделаем крутую систму, все подпишимся и будет good |
| Автор: ksnk 13.5.2007, 11:25 |
| Кое-кто говорил, что мой код слишком сложен На правах идеи - по onkeydown сохранять предыдущее значение value, по onkeyup - измененное. Если последнее не подходит - ругаемся. Никаких selection'ов и и прочей странной магии. По разнице введенных данных и с учетом маски можно понять (надеюсь) что-же было введено. |
| Автор: linuxer 13.5.2007, 12:20 | ||||
Ну чтоб ввод был совсем уж управляемый, можно "съесть" keyCode, а символ(ы) вставить(удалить) самому Добавлено через 10 минут и 47 секунд
ещё недоработка: при нажатии ctrl/shift (или при переключении раскладки), сообщения об ошибке не приходит, но курсор перемещается на следующий символ |
| Автор: Alex_B 14.5.2007, 12:12 |
| operatedInput v0.2.8 (РАБОЧАЯ) Изменения: По сравнению с http://forum.vingrad.ru/index.php?showtopic=149225&view=findpost&p=1131333 -Добавлена корректная работа с быстрым и бездумным давлением на клавиши – система не дает сбоя. -Добавлена корректное выполнение нажатий ctrl/ shift /переключении раскладки/ tab Поддерживаются следующие специальные символы для задания маски: 0 – только цифра R – только русская буква / - экранирование символа Пример использования такой же как и http://forum.vingrad.ru/index.php?showtopic=149225&view=findpost&p=1131333 ToDo List Версия рабочая и пригодна для использования, однако требуются изменения – добавить правил, подсказку оформить как tooltip, возможно привести код в порядок. |
| Автор: ksnk 14.5.2007, 16:27 |
Действительно, работает.
|
| Автор: Alex_B 14.5.2007, 17:09 | ||
>Нет разумной возможности очистить поле ввода. А как должна выглядеть разумная очистка ввода? Сейчас можно стирать Backspace и del >Нет возможности отметить поле ввода и скопировать его Я и не думал, что это может понаджобиться. Спасибо за идею. >copy-paste. Можно вставить что-нибудь в поле безнаказанно. Может, по onBlur тоже проверять? А вот тут сложная задача... |
| Автор: ksnk 14.5.2007, 18:13 | ||
|
| Автор: ksnk 14.5.2007, 20:01 |
| Поиск MaskEdit'а в интернете дал тот факт, что в проекте http://tapestry.apache.org/tapestry5/dev/checklist.html (некий фреймворк для разработки WEB приложений) содержится MaskEdit для input'а. Препарирование сего проекта дало вот этот код. Ногами - не бить , моего тут - только HTML. |
| Автор: Alex_B 14.5.2007, 21:39 | ||
В опере не работает, в IE блокирует как потенциально опасное содержимое |
| Автор: ksnk 14.5.2007, 22:10 | ||
Я не хочу сказать, что это крутой продукт А вот про потенциально опасное содержимое поподробнее можно? Вроде ничего, кроме обычного javascript'а там нет. |
| Автор: Alex_B 14.5.2007, 22:27 | ||||
а может и нет |
| Автор: ksnk 14.5.2007, 22:38 |
| Угу. Это - обычная паранойя IE В заголовке скрипта стоит дата его создания - 2002 год. Это несколько объясняет довольно прямолинейный (по нынешним временам) стиль... |
| Автор: linuxer 15.5.2007, 05:04 | ||
backspace/delete в отличие от о стальных могут залипать и не только стирают всё, но и приводят к зависанию |
| Автор: KoLoB 28.5.2007, 16:08 |
| Почему развитие проекта приостановлено? Кстати вот уже нашёл и немного подправил скрипт, делающий похожее, но возник ряд ошибок, которых не могу разрешить... Помогите, ведь есть возможность сделать действительно полезную работающую систему. http://forum.vingrad.ru/forum/topic-153144/kw-opera-mask-firefox.html |
| Автор: Alex_B 8.5.2008, 12:16 |
| Приятно удивило. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/MaskedEdit/MaskedEdit.aspx |
| Автор: yarbala 29.5.2008, 16:46 | ||
| http://digitalbush.com/projects/masked-input-plugin - я в шоке, все просто и красиво вот пример
|