Что значит ввести номер по маске

Маска ввода для HTML элемента input

Плагин masked input предназначен для установления маски ввода элементу input с помощью кода JavaScript. Данный плагин для своего функционирования требует наличие подключённой библиотеки jQuery. Скачать плагин jquery.maskedinput.js ( jquery.maskedinput.min ) можно посредством следующей ссылки:

Подключение плагина

После того как Вы скачали этот плагин (файл js), его необходимо подключить. Это осуществляется с помощью элемента script :

Создание HTML маски ввода

Создания маски ввода осушествляется в js коде с помощью следующих знаков:

• Цифра 9 – соответствует цифре от 0 до 9.
• Символ a – представляет собой любой английский символ (A-Z, a-z).
• Знак * — представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).

Например рассмотрим процесс создания маски ввода телефона для элемента input , имеющего id=»phone» :

Создание HTML элементу input маски ввода телефона

Если в качестве заполнителя Вы хотите использовать что-то другое, то его можно указать посредством параметра placeholder следующим образом:

Использование различных заполнителей в масках ввода masked input

Кроме placeholder данный плагин имеет ещё параметр completed . Он предназначен для задания действий, которые будут выполнятся после того как пользователь завершит ввод маски ввода.

Например, выведем с помощью метода alert сообщение пользователю, когда он завершит ввод маски телефона:

Сообщение, отображаемое пользователю после того как он завершил ввод маски телефона

Иногда бывают такие ситуации, когда одна часть маски является обязательной для заполнения, а другая часть нет. Чтобы это указать, в Masked Input используется знак ‘?’ . Этот знак является специальным символом, после которого необходимо разместить часть маски необязательной для заполнения.

Например, пользователю необходимо ввести число от 0 до 0.99 . При этом обязательным для заполнения является указание хотя бы одного знака после запятой.

Демонстрация работы маски для ввода числа с одним или двумя знаками после запятой

Настройка маски ввода Masked Input

Плагин Masked Input позволяет использовать в маске кроме предопределенных специальных знаков ( 9 , a , * ) свои собственные.

Например, создадим для маски специальный символ

, который при вводе должен быть заменён на знак ( + ) или минус ( — ).

Демонстрация работы маски для ввода положительного или отрицательного числа

Например, создадим маску для ввода CSS цвета в шестнадцатеричном формате:

Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате

Пример создания маски ввода телефона

Рассмотрим пример создания маски для ввода телефона в зависимости от выбранной страны:

Демонстрация работы маски для ввода телефона в зависимости от выбранной страны

Маска ввода номера телефона

Добрый день. Сегодня мы еще немного улучшим наши формы обратной связи. Я расскажу вам как сделать маску для наших форм обратной связи. В первую очередь — это может быть полезно с точки зрения безопасности сайта.

Мы не позволим вводить в поле лишние символы, а во вторую — пользователю будет понятно в каком именно формате мы хотим получить от него данные. Например, дату рождения, номер телефона и т.д.

Для того, чтобы вы понимали о чем речь:

Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной последовательности.

Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать — это подключить библиотеку jQuery:

Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с официального сайта, а подключаем следующим образом:

Теперь необходимо создать саму маску. Для этого воспользуемся следующим кодом:

Где #phone — идентификатор поля с номером телефона, а .mask(«(999) 999-9999») — маска. Цифра девять означает, что в данном поле можно будет вводить только цифры от 0 до 9.

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

Надеюсь вам стало понятно как создается такой эффект. Существуют и другие значения для масок:

• a — Все алфавитные значения (A-Z,a-z) или (A-Я,a-я). Если не сработает, попробуйте убрать запятую.
• 9 — Все цифровые значения (0-9)
• * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)

А на сегодня — все. Всем — пока. Эксперементируйте с масками. Вы обязательно найдете им достойное применение.

Всем, кто искал альтернативу или «баг» мешает нормальному приему заявок, рекомендую почитать эту статью.

Что значит ввести номер по маске

Вы можете помочь пользователям правильно вводить данные в классические базы данных Access, подключив маски ввода к полям, имеющим строго определенный формат значений, например номера телефонов.

Маска влияет только на ввод значений в Access: она не меняет способ их хранения, который записи от типа данных поля и других свойств. Дополнительные сведения о хранении данных в Access см. в статье Введение в типы данных и свойства полей.

Важно: Эта статья относится только к классическим базам данных Access. Веб-приложения и веб-базы данных Access не поддерживают маски ввода.

В этой статье

Общие сведения о масках ввода

Маска ввода — это строка символов, указывающая формат допустимых значений входных данных. Маски ввода можно использовать в полях таблиц или запросов, а также в элементах управления форм и отчетов. Маска ввода хранится в свойствах объекта.

Маску ввода рекомендуется использовать, когда вводимые значения должны иметь единый формат, например для полей с номерами телефонов из десяти цифр. Если пользователь введет номер, не указав код города, данные не будут приняты в Access, пока пользователь не добавит код города.

Три компонента маски ввода

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

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

Второй компонент не является обязательным и определяет способ хранения встроенных знаков маски в поле. Если для этого компонента задано значение 0, знаки сохраняются вместе с данными, а если 1, то знаки отображаются без сохранения. Выбрав значение 1, можно сэкономить место для хранения базы данных.

Третий компонент маски ввода также не является обязательным и определяет знак, используемый в качестве заполнителя. По умолчанию в Access используется знак подчеркивания (_). Чтобы задать другой знак, введите его в третьем компоненте маски.

Пример маски ввода для телефонных номеров в формате России: (999) 000-00-00;0;-:

В маске используются два заполнителя — 9 и 0. Заполнитель 9 обозначает необязательные цифры (код города можно не вводить), а 0 — обязательные.

Значение 0 во втором компоненте маски ввода указывает на то, что знаки маски следует хранить вместе с данными.

Третий компонент маски ввода указывает на то, что вместо знака подчеркивания (_) в качестве заполнителя будет использоваться дефис (—).

Знаки, определяющие маски ввода

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

Пользователь должен ввести цифру (от 0 до 9).

Пользователь может ввести цифру (от 0 до 9).

Пользователь может ввести цифру, пробел, знак «плюс» или «минус». Если ничего не ввести, будет вставлен пробел.

Пользователь должен ввести букву.

Пользователь может ввести букву.

Пользователь должен ввести букву или цифру.

Пользователь может ввести букву или цифру.

Пользователь должен ввести какой-либо знак или пробел.

Пользователь может ввести знаки или пробелы.

Разделитель целой и дробной части, групп разрядов, значений дат и времени. Выбираемый знак зависит от региональных параметров Windows.

Все последующие знаки будут переведены в верхний регистр.

Все последующие знаки будут переведены в нижний регистр.

Маска ввода заполняется слева направо, а не справа налево.

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

Знаки, заключенные в двойные кавычки, отображаются без изменений.

Когда следует избегать использования масок ввода в Access

Маски ввода — это полезный инструмент, но он уместен не во всех случаях. Не используйте маски ввода, если верно одно из следующих утверждений.

Иногда может потребоваться ввести данные в формате, не соответствующему маске. Маска ввода не допускает исключений.

Планируется использовать элемент управления «Выбор даты» с полем даты и времени. Маски ввода несовместимы с таким элементом управления.

Добавление маски ввода в поле таблицы с помощью мастера масок ввода

Маски ввода можно использовать для полей с типом данных «Текстовый», «Числовой» (кроме кода репликации), «Денежный» и «Дата/время».

Примечание: Если применить маску ввода к полю с типом данных «Дата/время», для этого поля невозможно будет использовать элемент управления Выбор даты.

В области навигации щелкните таблицу правой кнопкой мыши и выберите в контекстном меню команду Конструктор.

Выберите поле, к которому необходимо применить маску ввода.

В разделе Свойства поля на вкладке Общие щелкните поле свойства Маска ввода.

Чтобы запустить мастер масок ввода, нажмите кнопку Построить .

Выберите нужный тип маски ввода из списка.

Щелкните поле Проба и введите данные, чтобы проверить работу маски.

Чтобы оставить маску ввода без изменений, нажмите кнопку Далее.

Выберите способ хранения данных.

Чтобы сохранить изменения, нажмите кнопку Готово.

Добавление маски ввода в запрос

В области переходов щелкните правой кнопкой мыши запрос, который требуется изменить, и выберите в контекстном меню команду Конструктор.

В бланке запроса установите курсор в столбец поля, которое требуется изменить.

Курсор можно поместить в любую строку для этого поля.

Нажмите клавишу F4, чтобы открыть окно свойств поля.

В разделе Свойства поля на вкладке Общие щелкните поле свойства Маска ввода.

Чтобы запустить мастер масок ввода, нажмите кнопку Построить . Следуйте инструкциям мастера.

Добавление маски ввода в элемент управления формы или отчета

В области переходов щелкните правой кнопкой мыши форму или отчет, которые требуется изменить, и выберите в контекстном меню команду Конструктор.

Щелкните правой кнопкой мыши элемент управления, который требуется изменить, а затем выберите в контекстном меню команду Свойства.

На вкладке Все щелкните поле свойства Маска ввода.

Чтобы запустить мастер масок ввода, нажмите кнопку Построить . Следуйте инструкциям мастера.

Создание настраиваемых масок ввода

В мастере предусмотрены маски ввода для наиболее распространенных вариантов форматирования, однако в некоторых случаях требуется настроить маску под особые нужды. Чтобы сделать это, можно либо изменить одну из предопределенных масок мастера ввода, либо вручную задать свойство «Маска ввода» для соответствующего поля.

Настройка масок ввода в мастере

Откройте объект в конструкторе и щелкните поле, к которому нужно добавить настраиваемую маску ввода.

Чтобы запустить мастер масок ввода, нажмите кнопку Построить .

Нажмите кнопку Изменить список.

Откроется диалоговое окно Настройка масок ввода.

Перейдите к новой записи в этом окне и введите новое описание в поле Описание.

В поле Маска ввода введите символы и заполнители с помощью разрешенных знаков из списка таблицы.

Щелкните стрелку списка Тип маски: и выберите подходящий тип маски.

Нажмите кнопку Закрыть. В списке появится новая маска ввода.

Настройка масок ввода в свойстве поля

В области навигации щелкните объект правой кнопкой мыши и выберите в контекстном меню команду Конструктор.

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

В области «Свойства поля» щелкните поле Маска ввода и введите собственную маску.

Чтобы сохранить изменения, нажмите сочетание клавиш CTRL+S.

Для полей числового и денежного типов определение маски ввода задается вручную.

Примеры масок ввода

В таблице ниже приведены примеры использования масок ввода.

Маска ввода

Обеспечивает ввод значения в виде

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

(206) 555-0199
( ) 555-0199

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

Предоставляется возможность заменить буквами четыре последних цифры телефонного номера в формате США. Обратите внимание на местозаполнитель 0 в области кода города, который делает междугородный код обязательным.

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

ЗЕЛЕНЫЙ339М3
МАЙ Р 452Б7

Сочетание обязательных (L) и необязательных (?) букв и обязательных цифр (0). Знак «больше» требует вводить все буквы в верхнем регистре. Чтобы использовать маску ввода этого типа, необходимо задать для типа данных поля таблицы значение Текстовый или Поле МЕМО.

Обязательный почтовый индекс и необязательная область четырехзначного расширения.

Имя или фамилия, первая буква которой автоматически вводится заглавной.

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

Сочетание обязательных букв и цифр, все в верхнем регистре. Данный тип маски ввода помогает, например, правильно вводить инвентарные номера или заполнять другие формы складского учета.

Использование масок ввода для адресов электронной почты

Поскольку адреса электронной почты могут быть самой разной длины, маски ввода не подходят для их проверки при вводе. Вместо масок ввода рекомендуется использовать свойства Правило проверки и Сообщение об ошибке.

Условие на значение, приведенное в таблице ниже, гарантирует, что адрес электронной почты будет состоять из одного или нескольких знаков, знака «@», еще одного или нескольких знаков, точки и еще одного или нескольких знаков. Например, адрес proverka@example.com будет правильным, а proverka@example,com или proverka@example — нет. Если ввести адрес электронной почты, не соответствующий условию на значение, введенные данные будут отклонены и появится сообщение, указанное в свойстве Сообщение об ошибке. Если свойство Сообщение об ошибке не задано, будет выведено стандартное сообщение.

Is Null Or ((Like «*?@?*.?*») And (Not Like «*[ ,;]*»))

Сообщение об ошибке (необязательно)

Введите адрес электронной почты со знаком «@» и полным именем домена (пример: frank@contoso.com).

Дополнительные сведения о применении правил проверки, а также пошаговые инструкции см. в статье Ограничение ввода данных с помощью правил проверки.

Подбор маски ввода по телефонному номеру

На web-сайтах очень требуется ввод информации о телефонном номере. Так сложилось, что каждая страна вправе устанавливать свои правила набора и длину номера, в результате чего между жителями разных стран периодически возникает путаница: одни привыкли указывать номер с ведущей цифрой 8 , другие — с ведущей цифрой 0 , а третьи — со знака + .

Обзор существующих решений

1. Пользователю предлагается вводить номер с использованием маски ввода. Преимущество: наглядное отображение номера сводит к минимуму возможные ошибки в номере. Недостаток: в каждой стране принято своё написание и длина номера.
2. Пользователю предлагается отдельно выбирать страну и отдельно вводить оставшуюся часть номера; возможно с применением маски ввода. Преимущество: возможность использования разных масок ввода для разных стран (а также регионов внутри страны). Недостатки: список стран (и регионов внутри каждой страны) может быть большим; номер телефона перестаёт существовать как единое целое (либо требуется предобработка перед сохранением и отображением номера).
3. Поставить знак + перед номером (за пределами input) и разрешить только ввод цифр. Преимущества: простота реализации. Недостаток: отсутствие наглядного отображения номера.

Предлагаемое решение

В результате было решено доработать привычную маску ввода так, чтобы она менялась в соответствии с текущим значением номера. Кроме того, по мере ввода номера предлагается отображать название определившейся страны. Данный подход, субъективно, должен решить все недостатки перечисленных выше решений.

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

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

Программная реализация

В качестве ядра маски ввода была использована реализация jquery.inputmask, о которой многократно упоминалось на Хабрахабр. Данный плагин сейчас активно развивается и, к тому же, спроектирован таким образом, что для него достаточно просто писать расширения. Однако в данной задаче написать такое расширение оказалось практически невозможно. Я не стал дорабатывать или переписывать исходный плагин под свои нужды, т.к. его автор продолжает активную работу над расширением функционала, в результате чего применение моих правок может оказаться проблематичным. Поэтому мне пришлось написать плагин-надстройку над основным ядром, который отслеживает (плюс перехватывает) внешние воздействия и производит модификацию данных. Для того, чтобы внедрить свои обработчики внешних воздействий до обработчиков основного плагина использовался плагина-библиотека jquery.bind-first.

Сортировка разрешённых масок ввода

1. Все символы в маске ввода разделены на 2 типа: значимые символы (в моём случае это символ # , означающий произвольную цифру, и цифры 0-9) и символы-декораторы (все остальные).
2. Другое деление символов в маске ввода — это шаблонные символы (в моём случае это символ # ) и все остальные.

1. При посимвольном сравнении 2 масок ввода во внимание принимаются только значимые символы (не декораторы).
2. Разные шаблонные символы воспринимаются как равные, а остальные значимые символы сравниваются на основе их кода.
3. Нешаблонные символы всегда меньше шаблонных и в результате располагаются выше.
4. Чем короче длина значимых символов в маске ввода, тем маска ввода считается меньше и располагается выше.

Поиск подходящей маски ввода

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

Обработка и перехват событий

• keydown — отслеживаются нажатия клавиш Backspace и Delete — с целью изменения текущей маски ввода перед тем как основной обработчик удалит один символ из текста. Кроме того, отслеживается нажатие клавиши Insert, которая изменяет режим ввода текста, для синхронизации.
• keypress — поскольку вводимый символ может быть неразрешён оригинальной маской ввода (т.к. все значимые символы в ней заменены на шаблонный), требуется проверить новую строку на удовлетворение одной из разрешённых масок. В случае, если таких масок нет, то ввод символа отбрасывается, иначе — производится обновление маски ввода, после чего событие передаётся обработчику ядра.
• paste, input — вставка текста из буфера обмена. Перед передачей обработки ядру производится подбор маски ввода для строки, получившейся в результате вставки текста из буфера обмена. В случае, если маску ввода подобрать не удалось, производится посимвольное урезание текста с конца — до тех пор, пока текст не станет удовлетворять хотя бы одной маске ввода. Аналогичная операция производится при исправлении текста в поле ввода вызовом функции val(), а также при инициализации маски ввода, если она применяется к непустому полю ввода.
• dragdrop, drop — обработка аналогична событию paste.
• blur — дополнительная обработка на случай, если включен режим очистки текста при потере фокуса, если он не удовлетворяет маске ввода. Это событие перехватывается после основного обработчика, в отличие от предыдущих.

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

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

Формат списка масок

Список масок представляет собой JavaScript-массив объектов, предпочтительно с одинаковым набором свойств. Как минимум одно свойство, которое содержит маску ввода, должно присутствовать у всех объектов массива. Имя параметра, содержащего маску, может быть произвольным. Ниже представлен фрагмент такого массива:

Параметры подключения плагина

До подключения требуется загрузить и отсортировать список масок. Это делается выполнением следующей функции: