Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Наши скрипты > Управляемый ввод


Автор: Alex_B 2.5.2007, 17:14
Предлагаю для использования/обсуждения сиситему маскИрованного ввода информации для 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/

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



ИСТОРИЯ ВЕРСИЙ
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
Цитата(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 "люди-энциклопедии" вообще советуют избегать - http://www.javascripttoolbox.com/bestpractices/#all
Надеюсь пригодится для "второй, более продуманной версии". smile


Автор: Alex_B 2.5.2007, 18:41
AKS,  спасибо. Ценные замечания, обязательно учту.

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

Автор: AKS 2.5.2007, 20:01
Цитата(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...


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

Автор: S.A.P. 2.5.2007, 21:30
1. По - моему лучше в атрибутах держать правила.
Что - то типа
Код

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

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

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

Автор: AKS 3.5.2007, 04:25
Цитата(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);

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

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

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

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

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

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

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

Я заметил некую однобокость в предъявленных статьях. Все примеры там связаны с явной генерацией циклических ссылок. http://www.bazon.net/mishoo/articles.epl?art_id=824. Там описан немного другой способ генерировать всякий лишний мусор  smile .
Хочется заметить, что при использовании AttachEvent'а значительно чаще используются анонимные функции

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

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

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

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

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

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

Автор: Alex_B 4.5.2007, 18:04
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:
Из-за экранировая появилась проблема со стирание введенных символов. Проблема чисто логическая, которую я попытался изложить http://forum.vingrad.ru/forum/topic-148858/kw-маскированный-ввод-маска-управляемый.html.
Она сейчас решена дуболомным способом - ведение двух(!) массивов в которые записывается история добавления символов.
(Есть еще и блок-схема, возможно кому-то будет интересно)
Сам код на мой взгляд требует серьезной оптимизации, чего только стоит: 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, было бы неплохо - тем более, что теперь он разросся до небес. А можно пример.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<script type="text/javascript" src="operatedInput021.js"></script>
</head>

<body>
<input name="Name" style="float:right;" type="text" value="" id="unp1">
</body>
 
<script type="text/javascript">
    operatedInput('unp1','(/000)000-00-00'); //назначение проверки
</script>
</html>


Из багов, которые бросились в глаза.
  • Del в FF не работает
  • после Del в IE нельзя вставить ничего
Цитата(Alex_B @  4.5.2007,  18:04 Найти цитируемый пост)
А можно пример.
 "Автозаполнение" - штука, над которой нужно подумать, простыми Reg'ами не сделать, так что пока - посмотрим / подумаем smile

Автор: Alex_B 4.5.2007, 19:35
Цитата(ksnk @ 4.5.2007,  19:13)
Из багов, которые бросились в глаза.[LIST]
[*]Del в FF не работает
[*]после Del в IE нельзя вставить ничего

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

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

Автор: Alex_B 4.5.2007, 20:51
Цитата(ksnk @ 4.5.2007,  19:48)
Вообще, кажется, что отдельно такая фенечка не очень интересна. Ее нужно собирать в комплекте с каким-нибудь ToolTip'ом, чтобы демонстрировать ошибки ввода не калеча дизайн...

Совершенно согласен.
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'ы для цифр...
Код

Custom Formats
Custom number formats can have one to four sections with semicolons (;) as the list separator. Each section contains the format specification for a different type of number.

Section Description 
First The format for positive numbers. 
Second The format for negative numbers. 
Third The format for zero values. 
Fourth The format for Null values. 


For example, you could use the following custom Currency format:

$#,##0.00[Green];($#,##0.00)[Red];"Zero";"Null"
        
This number format contains four sections separated by semicolons and uses a different format for each section.

If you use multiple sections but don't specify a format for each section, entries for which there is no format will either display nothing or default to the formatting of the first section.

You can create custom number formats by using the following symbols.

Symbol Description 
. (period) Decimal separator. Separators are set in the regional settings in Windows. 
, (comma) Thousand separator. 
0 Digit placeholder. Display a digit or 0. 
# Digit placeholder. Display a digit or nothing. 
$ Display the literal character "$". 
% Percentage. The value is multiplied by 100 and a percent sign is appended. 
E– or e– Scientific notation with a minus sign (–) next to negative exponents and nothing next to positive exponents. This symbol must be used with other symbols, as in 0.00E–00 or 0.00E00. 
E+ or e+ Scientific notation with a minus sign (–) next to negative exponents and a plus sign (+) next to positive exponents. This symbol must be used with other symbols, as in 0.00E+00. 

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


Автор: Alex_B 5.5.2007, 17:59
ksnk, такая документация и уменя самого есть.  smile 

Вопрос в том, что конкретно может понадобиться для веба?
(вводить телефон, номер паспорта, ФИО - для этого вполне хватит и 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
Цитата(Alex_B @  5.5.2007,  20:20 Найти цитируемый пост)
Как вариант, можно вообще запретить copy-paste.

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

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

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

Автор: AKS 6.5.2007, 05:46
Цитата(ksnk @  5.5.2007,  22:25 Найти цитируемый пост)
можете предложить вариант регескпа

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

Автор: 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
Не вдаваясь сильно в логику приложения, переписал, действительно учитывая пожелания звучавшие в этой ветке smile 

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

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

Автор: 12345c 8.5.2007, 16:16
Да, я подумал над юзабельностью, и увидел большой недостаток: о шаблонах разговор есть, а шаблона юзеру не видно. Его можно, конечно, написать рядом, но это прошлый век в скриптах. Лучше сделать поле, очень похожее на ввод, чтобы не пришлось объяснять. Наводит юзер на него - там высвечивается шаблон. Кликнул на цифру - замигал курсор или подчёркивание (всё на стилях и таймере). И шаблон цифры продолжает подсвечиваться, только бледно, чтобы не забыл, что цифру надо ввести. Ввёл - фон белый под цифрой, а курсор на следующем допустимом для ввода символе. Затирания (по document.onkeyup), стрелки и delete эмулируются, мышью переходим на цифры. Чтобы при наведении в поле появилось примерно вот это:
Код
<style>
.digit{background:#CA9;border:1px solid #642;padding:2px;margin:1px;color:#ffc}
.symb{background:#A9C;border:1px solid #426;padding:2px;margin:1px;color:#ffc}
.templateInput{border:2px inset;padding:2px;margin:2px}

</style>

<div><tt class=templateInput>
<span class=digit>Ц</span><span class=digit>Ц</span><span class=digit>Ц</span><span class=symb>-</span><span 
class=digit>Ц</span><span class=digit>Ц</span><span class=symb>-</span><span class=digit>Ц</span><span
 class=digit>Ц</span>&nbsp;&nbsp;</tt></div></tt>
Тогда понятно будет, что ввод по шаблону.

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


Alex_B, Мой скрипт был не исправлением логики парсера, а скорее демонстрацией принципа "гибкости". Парсер ввода - отдельно, тултип - отдельно. И еще для полноты картины - возможность множественных полей ввода на страничке. Если что-то понравилось, я буду рад, если это что-то появится/останется и в следующих версиях скрипта smile 
Цитата(Alex_B @  7.5.2007,  22:38 Найти цитируемый пост)
Скоро будет готова новая версия, работающая по другому принципу.
 Ждем'с  smile 

Автор: 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.(выделяется все поле – после попытки ввести символ - курсор ввода ставится на первую позицию для ввода)
-Маска ввода теперь видна. Специальные символы в ней заменяются указанным разработчиком символом.

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

operatedInput('mask','(/000)000-00-00','_');

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

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

<html>
<head>
    <title>jsMask</title>
    <script type="text/javascript" src="operatedInput028.js"></script>
    <script type="text/javascript">
    window.onload=function(){
        operatedInput('mask','(/000)000-00-00','_');
    }
    </script>
<style type="text/css">
.text_error{
    border: 1px solid #FF0000;
}
</style>
</head>
<body>
<input name="Name" type="text" value="asas" id="mask">
</body>
</html>



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



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

//непосредственно проверка ввода
var permit = true;
function doRule(e){
    var evt = e || window.event;
    var code = evt.charCode || evt.keyCode;
    var rule = getMaskChar(input,synchronizeMask);
    switch (rule){
        case '0':
            if ((code < 48) || (code > 57)){mark2(inputID,'ожидается цифра');permit = false;}
            break;

        case 'R':
            if ((code < 1040) || (code > 1103)){mark2(inputID,'ожидается русская буква');permit = false;}
            break;

        default:
            permit = false;
            break;
    }
    return permit;
}//end непосредственной проверки ввода
input.onkeypress = doRule;

input.onkeyup = function(e){
    input.onkeypress = null;
    ...
    setSelectionRange(input,Selection.end,Selection.end+1);   //сдвигаем выделение вправо
    ...
}


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

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

Автор: linuxer 13.5.2007, 12:20
Цитата(Alex_B @ 13.5.2007,  09:51)
Возможно, есть какой-то другой способ, например, запретить ввод, если в поле ввода нет выделения?? Буду благодарен за идею.
(сделаем крутую систму, все подпишимся и будет  good smile )

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

Добавлено через 10 минут и 47 секунд
Цитата(Alex_B @ 13.5.2007,  09:51)
operatedInput v0.2.7

ещё недоработка:
при нажатии 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
Действительно, работает. smile Не без приглючений, правда. Из оставшихся багов накопалось пока:
  • copy-paste. Можно вставить что-нибудь в поле безнаказанно. Может, по onBlur тоже проверять?
  • Нет разумной возможности очистить поле ввода.
  • Нет возможности отметить поле ввода и скопировать его


 


Автор: Alex_B 14.5.2007, 17:09
Цитата(ksnk @ 14.5.2007,  16:27)
Действительно, работает. smile Не без приглючений, правда. Из оставшихся багов накопалось пока:

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

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

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

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

Автор: ksnk 14.5.2007, 18:13
Цитата(Alex_B @  14.5.2007,  17:09 Найти цитируемый пост)
А как должна выглядеть разумная очистка ввода?
Сейчас можно стирать Backspace  и del
 Иногда хочется не вводить в поле ничего. Обычно это делается кнопкой Del на полностью выделенном поле smile Сейчас этого сделать нельзя. 


Автор: ksnk 14.5.2007, 20:01
Поиск MaskEdit'а в интернете дал тот факт, что в
проекте http://tapestry.apache.org/tapestry5/dev/checklist.html (некий фреймворк для разработки WEB приложений) содержится MaskEdit для input'а. Препарирование сего проекта дало вот этот код.
Ногами - не бить , моего тут - только HTML.  smile 

Автор: Alex_B 14.5.2007, 21:39
Цитата(ksnk @ 14.5.2007,  20:01)
Поиск MaskEdit'а в интернете дал тот факт, что в
проекте http://tapestry.apache.org/tapestry5/dev/checklist.html (некий фреймворк для разработки WEB приложений) содержится MaskEdit для input'а. Препарирование сего проекта дало вот этот код.
Ногами - не бить , моего тут - только HTML.  smile

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

Автор: ksnk 14.5.2007, 22:10
Цитата(Alex_B @  14.5.2007,  21:39 Найти цитируемый пост)
В опере не работает, в IE блокирует как потенциально опасное содержимое

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

Автор: Alex_B 14.5.2007, 22:27
Цитата(ksnk @ 14.5.2007,  22:10)
Цитата(Alex_B @  14.5.2007,  21:39 Найти цитируемый пост)
В опере не работает, в IE блокирует как потенциально опасное содержимое

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

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

Автор: ksnk 14.5.2007, 22:38
Цитата(Alex_B @  14.5.2007,  22:27 Найти цитируемый пост)
которое потенциально опасно
 Угу. Это - обычная паранойя IE  smile 
В заголовке скрипта стоит дата его создания - 2002 год. Это несколько объясняет довольно прямолинейный (по нынешним временам) стиль...

Автор: linuxer 15.5.2007, 05:04
Цитата(Alex_B @ 14.5.2007,  12:12)
operatedInput v0.2.8
(РАБОЧАЯ)

smile 
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  - я в шоке, все просто и красиво

вот пример
Код

<html>
<head>
    <title>jsMask</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.maskedinput-1.1.3.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
jQuery(function($){
   $("#date").mask("9999 999999999 9");
});

</script>

<input name="Name" type="text" value="3012 005120000 7" id="date">
</body>
</html>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)