Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Управляемый ввод, система проверки полей ввода 
:(
    Опции темы
Alex_B
Дата 2.5.2007, 17:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: 1
Всего: 1



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

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

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

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

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

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

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

Код

<input name="Name" type="text" value="" id="unp1">


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

<script type="text/javascript">
    window.onload=function(){
        operatedInput(' unp1','(`~__)`__)'; //назначение проверки
    }
</script>


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

.text_error{
    border: 1px solid #FF0000;
}


Так же есть статья на эту тему:
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
PM MAIL   Вверх
AKS
Дата 2.5.2007, 18:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52



Цитата(Alex_B @  2.5.2007,  17:14 Найти цитируемый пост)
Буду рад, отзывам, предложениям. 

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

case '_':
    return true;
    break;
case '':
    return false;
    break;

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

var evt = (e) ? e : window.event;

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

var evt = e || window.event;

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


PM MAIL   Вверх
Alex_B
Дата 2.5.2007, 18:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: 1
Всего: 1



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

Насчет document.all. Это применяется как раз для идентификации IE. Т.е. заведомо изывестно, что document.all применять в других браузерах нельзя
PM MAIL   Вверх
AKS
Дата 2.5.2007, 20:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52



Цитата(Alex_B @  2.5.2007,  18:41 Найти цитируемый пост)
Насчет document.all. Это применяется как раз для идентификации IE.

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

var code = (document.all) ? evt.keyCode:evt.charCode;

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

var code = evt.charCode || evt.keyCode;

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


PM MAIL   Вверх
12345c
Дата 2.5.2007, 21:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 2
Всего: 101



Цитата(AKS @  2.5.2007,  20:01 Найти цитируемый пост)
Кстати, неплохо было бы во второй версии использовать методы attachEvent/addEventListener. IE это будет "по душе", если, конечно, сделать функцию check внешней - во избежание memory leaks...
Кстати, не объясните, в чём глубокий плюс attachEvent в сравнении с присваиванием как свойству (объект.onclick=finction()...;)?

PM WWW   Вверх
S.A.P.
Дата 2.5.2007, 21:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник Клуба
Сообщений: 2664
Регистрация: 11.6.2004

Репутация: нет
Всего: 71



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

<input name="Name" type="text" value="" id="unp1" rule="(`~__)`__" />

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

2. Почему RegExp не использовали? Зачем нужно было писать свой парсер?
PM MAIL   Вверх
AKS
Дата 3.5.2007, 04:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52



Цитата(12345c @  2.5.2007,  21:01 Найти цитируемый пост)
в чём глубокий плюс attachEvent в сравнении с присваиванием как свойству

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

var fn = el.onclick;
el.onclick = function (e) {
    if (fn) {
        fn(e);
    }
    myFunc(e); // моя функция
}

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

el.attachEvent('onclick', myFunc);

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


Это сообщение отредактировал(а) AKS - 3.5.2007, 04:48
PM MAIL   Вверх
ksnk
Дата 3.5.2007, 09:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386



Цитата(AKS @  3.5.2007,  04:25 Найти цитируемый пост)
как истинный джентельмен

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


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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
AKS
Дата 3.5.2007, 15:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52



Цитата(ksnk @  3.5.2007,  09:21 Найти цитируемый пост)
вы должны были написать больше

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

Минус Attach event'а в том, что требуется бороться с memory leak'ами в IE

С утечками памяти бороться придется в любом случае (если мы - "истинные джентельмены" ;) ), а метод 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

PM MAIL   Вверх
ksnk
Дата 3.5.2007, 16:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386



Цитата(AKS @  3.5.2007,  15:28 Найти цитируемый пост)
А что за "темная история" со строкой в св-ве, которую нужно передать eval'у?
 Вот у такого A 
Код

<a onClick='alert("Oops!");return false' href='#'>Click me</a>
, onclick будет не функцией

Цитата(AKS @  3.5.2007,  15:28 Найти цитируемый пост)
а метод attachEvent к ним отношения не имеет (т.е. не он виновник)

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


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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
AKS
Дата 3.5.2007, 16:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52



Цитата(ksnk @  3.5.2007,  16:08 Найти цитируемый пост)
 Вот у такого 
<a onClick='alert("Oops!");return false' href='#'>Click me</a> onclick будет не функцией

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

PM MAIL   Вверх
ksnk
Дата 3.5.2007, 16:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386



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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
AKS
Дата 3.5.2007, 17:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52



 smile 
Цитата(ksnk @  3.5.2007,  16:46 Найти цитируемый пост)
рецидив "бытовой логики"

Ага, так это тот же самый Ksnk, только без заглавной! smile   А я думаю: "Наверно не тот - чего-то тут с маленькой"...  smile
Приветствую на этом форуме!
PM MAIL   Вверх
ksnk
Дата 3.5.2007, 17:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386



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



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Alex_B
Дата 4.5.2007, 18:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: 1
Всего: 1



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

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

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


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

var mask = '(/000)000-00-00';

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


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

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

Добавлено через 11 минут и 30 секунд
Цитата(S.A.P. @ 2.5.2007,  21:30)
1. По - моему лучше в атрибутах держать правила.
Что - то типа
Код

<input name="Name" type="text" value="" id="unp1" rule="(`~__)`__" />

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

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

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

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

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

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

Присоединённый файл ( Кол-во скачиваний: 42 )
Присоединённый файл  operatedInput021.zip 1,77 Kb
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.1673 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.