что такое маска ввода
Подбор маски ввода по телефонному номеру
Введение
Обзор существующих решений
Предлагаемое решение
В результате было решено доработать привычную маску ввода так, чтобы она менялась в соответствии с текущим значением номера. Кроме того, по мере ввода номера предлагается отображать название определившейся страны. Данный подход, субъективно, должен решить все недостатки перечисленных выше решений.
С учётом того, что количество стран в мире относительно невелико, было принято решение составить список масок ввода для всех стран. В качестве источника использовались сведения, опубликованные на сайте международного союза электросвязи.
Сбор данной информации преподнёс немало сюрпризов. В процессе сбора сведений приходилось учитывать все возможные варианты телефонных номеров, в том числе внутри страны. Однако, ввиду большого количества обработанной вручную информации, возможно, в собранной базе остались неточности. С течением времени планируется вносить исправления в первоначальный набор.
Программная реализация
В качестве ядра маски ввода была использована реализация jquery.inputmask, о которой многократно упоминалось на Хабрахабр. Данный плагин сейчас активно развивается и, к тому же, спроектирован таким образом, что для него достаточно просто писать расширения. Однако в данной задаче написать такое расширение оказалось практически невозможно. Я не стал дорабатывать или переписывать исходный плагин под свои нужды, т.к. его автор продолжает активную работу над расширением функционала, в результате чего применение моих правок может оказаться проблематичным. Поэтому мне пришлось написать плагин-надстройку над основным ядром, который отслеживает (плюс перехватывает) внешние воздействия и производит модификацию данных. Для того, чтобы внедрить свои обработчики внешних воздействий до обработчиков основного плагина использовался плагина-библиотека jquery.bind-first.
Сортировка разрешённых масок ввода
Поиск подходящей маски ввода
При сравнении входного текста с очередной маской из отсортированного списка принимаются во внимание только значимые символы каждой маски. Если строка оказывается длиннее маски ввода, несмотря на то что все предшествующие символы прошли проверку, данная маска ввода считается неподходящей. В случае, если входному тексту удовлетворяет несколько масок ввода, то возвращается первая из них. Далее в найденной маске все значимые символы (в том числе нешаблонные) заменяются на шаблонный, который является комбинацией всех символов, разрешённых любым из шаблонных символов.
Обработка и перехват событий
Все события навешиваются в пространстве inputmask. Это позволяет избежать некорректного поведения при вызове inputmask после инициализации надстройки (т.к. ядро при инициализации снимает все ранее установленные обработчики в пространстве inputmask).
Пример использования
Формат списка масок
Список масок представляет собой JavaScript-массив объектов, предпочтительно с одинаковым набором свойств. Как минимум одно свойство, которое содержит маску ввода, должно присутствовать у всех объектов массива. Имя параметра, содержащего маску, может быть произвольным. Ниже представлен фрагмент такого массива:
Параметры подключения плагина
До подключения требуется загрузить и отсортировать список масок. Это делается выполнением следующей функции:
Для инициализации плагина нужно применить метод inputmasks к полю ввода:
Определение маски ввода
Если свойство Формат (Format) управляет тем, как данные отображаются в поле таблицы, то свойство Маска ввода (Input Mask) позволяет контролировать ввод данных в таблицу. И не только контролировать, но и упрощать процесс ввода. Маску используют в том случае, когда вводимые данные должны содержать определенные символы в некоторых позициях вводимой строки. Самым простым и ярким примером таких данных являются номера телефонов. Маска ввода должна обеспечить возможность вводить только цифры номера, а остальные символы (скобки вокруг кода города, дефис между цифрами номера) будут добавляться автоматически. Маска задается с помощью символов, приведенных в табл. 2.12.
| Символ маски | Описание |
| 0 | В данную позицию должна быть введена цифра. Знаки плюс (+) и минус (-) не допускаются |
| 9 | В данную позицию должна быть введена цифра или пробел. Знаки плюс (+) и минус (-) не допускаются |
| # | В данную позицию должна быть введена цифра, пробел, знаки плюс (+) или минус (-) |
| L | В данную позицию должна быть введена буква |
| ? | В данную позицию может быть введена буква или пробел |
| A | В данную позицию должна быть введена буква или цифра |
| a | В данную позицию должна быть введена буква, цифра или пробел |
| & | В данную позицию должен быть введен произвольный символ или пробел |
| C | В данную позицию может быть введен произвольный символ или пробел. Если пользователь ничего не введет, Access не занесет в эту позицию никаких данных |
| . (точка) | Десятичный разделитель (зависит от региональных установок в окне Язык и стандарты Панели управления Windows) |
| , (запятая) | Разделитель групп разрядов (зависит от региональных установок в окне Язык и стандарты Панели управления Windows) |
| -, / | Разделители в значениях даты и времени (зависят от региональных установок в окне Язык и стандарты Панели управления Windows) |
| Преобразует все символы справа к верхнему регистру | |
| ! | Указывает, что маску нужно заполнять справа налево. Этот символ следует использовать в том случае, когда символы в левой части маски являются необязательными. Его можно помещать в любой позиции маски |
| \ | Указывает, что следующий символ необходимо рассматривать в качестве постоянного символа, даже если он является специальным символом маски. Например, \А будет выводить в маске букву А |
| «литерал» | Вместо того чтобы многократно использовать символ обратного слэша (\), можно просто заключить любой литерал в двойные кавычки |
Таблица 2.12. Символы для создания масок ввода
Для того чтобы сформировать маску ввода, можно использовать Мастера масок ввода (Input Mask Wizard). Откройте в режиме Конструктора таблицу «Заказы» (Orders). Выделите поле «Дата размещения». Чтобы ввести маску ввода для этого поля, щелкните мышью по ячейке свойства Маска ввода (Input Mask). Нажмите небольшую кнопку с тремя точками (рис. 2.21), которая появится справа (эта кнопка называется кнопкой Построителя и будет встречаться еще во многих местах), и дальше следуйте указаниям мастера:
Сформированная символьная строка маски отображается в поле Маска ввода (Input Mask) для поля «ДатаРазмещения» (OrderDate) (рис. 2.22). Маска ввода состоит из трех частей: