Что такое номера по маске

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

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

Маска задаёт формат телефонного номера, не допуская возможности введения однозначно неверного номера (слишком много или мало цифр, неверный код страны, нецифровые символы), и задаётся в visitorFields:def в настройках для каждого размещения в отдельности. Маска по умолчанию имеет следующий вид:

"phone":>

При вводе посетителем телефонного номера в соответствующее поле запроса контактной информации вся полученная строка передаётся валидатору, проверяющему номер на соответствие заданной маске. В случае успешного прохождения проверки валидатор возвращает True , в противном случае False .

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

В маске телефонного номера допускаются некоторые изменения, такие как смена кода страны или формата номера в целом. Для этого облачным клиентам необходимо обратиться в техническую поддержку, а hosted-клиентам самостоятельно произвести изменение маски под необходимый формат в location settings.

Что такое маска телефонного номера

Информация добавлена нашими специалистами 22 декабря 2017 г.

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

Маска:

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

Таким образом, маски бывают не только для полей ввода телефона, но и других вводимых посетителем данных (например, даты). Если в поле установлена маска, то у вас не получится написать в нём что угодно: только разрешённые символы и только в определённом формате , то есть с заранее указанными разделителями. Например, маска для ввода телефона в форме может выглядеть так:

+7 (___) ___-__-__

В приведённом примере вместо символа подчёркивания вам предлагается ввести цифры. Разделители уже установлены (скобки, пробел), также в начале номера есть «+7». Всё это делается не только для того, чтобы посетитель не думал над тем, в каком формате ему нужно ввести номер, но и для облегчения проверки введённых данных.

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

С уважением,
студия WebMouse
опубликовано 22 декабря 2017 г.

Поделитесь с друзьями или коллегами

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

Интересно? Вы можете узнать больше!

Что такое JavaScript
Что такое форма на сайте
Что такое виджет
Что такое обратный звонок
Что такое юзабилити

Полный список определений

У вас есть свой вопрос?

Мы не претендуем на полноту нашего справочника, поэтому.

Если вы не нашли в справочнике значение нужного слова или выражения, напишите в онлайн чат. Оператор ответит на ваш вопрос, если он имеет отношение к созданию и продвижению сайтов.

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

Создаем маску для номера телефона

В качестве примера создадим форму для сборка заявок с номерами телефонов. Мы вводим номер телефона в российском формате +7(900)111-11-11. Маска не позволит нам ошибиться, а также сделает ввод номера более наглядным.

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

Подключаем библиотеку Imask.js

Для начала вам необходимо будет скачать стартовый проект на моем GitHub.

Рассмотрим два основных вариантов подключения Imask.js.

Подключение через CDN

Для подключения скрипта напрямую с хранилища Unpkg в конце файла index.html вставьте скрипт:

Установка в NPM

Если вы пользуетесь пакетным менеджером NPM — можете установить его в качестве зависимости:

npm install imask

А далее импортировать в проект:

import IMask from 'imask';

Дополнительные стили для кнопки

Кнопка Отправить должна быть по умолчанию не активна и только, если номер заполнен верно — делаем ее активной. Поработаем со стилями нашей кнопки в style.css.

.container .form .btn < margin-left: 20px; padding: 20px; font-size: 25px; border: none; background-color: #f69b64; color: #fff; pointer-events: none; /* Добавить */ >/* Добавить дополнительный класс */ .container .form .btn--active

Чтобы сделать кнопку неактивной используем свойство pointer-events со значением none. Класс btn—active делает кнопку снова активной и меняет ее цвет на более яркий.

Скрипт для работы маски и кнопки отправки

Описание скрипта в комментариях к коду.

// Считываем поле ввода let phoneInput = document.querySelector(".phone"); // Считываем кнопку let btn = document.querySelector(".btn"); // Создаем маску в инпуте const phoneMask = new IMask(phoneInput, < mask: "+(000)000-00-00", >); // Обработчик события для инпута phoneInput.addEventListener("input", phoneInputHandler); // Обработчик события для кнопки btn.addEventListener("click", btnHandler); // Если ввели правлильно - кнопка активна function phoneInputHandler() < if (phoneMask.masked.isComplete) < btn.classList.add("btn--active"); >else < btn.classList.remove("btn--active"); >> // Отправляем номер телефона async function btnHandler(e) < e.preventDefault(); return await fetch("send_msg.php", < method: "POST", body: phoneMask.unmaskedValue, >); >

Мы создаем объект маски phoneMask, который привязываем к полю phoneInput. Объект phoneMask имеет поля для работы, например:

phoneMask.masked.isComplete — проверяет полностью ли введен номер
phoneMask.unmaskedValue — переводит номер из маски в обычное число

Например номер +7(900)111-11-11 будет выглядеть так: 79001111111.

Более подробную информацию ищите в документации.

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

Warning: Undefined variable $aff_bottom_mark in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 53

Warning: Undefined variable $aff_bottom_info in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 57

Warning: Undefined variable $aff_side_mark in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 83

Warning: Undefined variable $aff_side_info in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 84

Главная
Статьи
Видео
Обратная связь
Политика конфиденциальности
Пользовательское соглашение

Продолжая использовать этот сайт, вы даете согласие на обработку файлов Cookies.

Проблема ввода цифры 8 после +7

Какую бы маску ввода разработчики не поставили на сайт, всё равно находятся пользователи которые играют «по своим правилам» и в стандартной маске мобильного телефона с +7 первой цифрой всё равно вводят 8. и вместо корректного номера телефона покупателя, администратор сайта получает номер с потерянной последней цифрой. Думаю данная ситуация знакома многим.

И конечно в решении есть варианты борьбы с данной ситуацией:
Вариант 1. Блокировка ввода 8

По умолчанию, решение блокирует ввод восьмерки первой цифрой, если маска начинается с +7. Данный вариант работает по умолчанию и не требует дополнительных настроек.

Вариант 2. Разрешить вводить телефон, как хотят пользователи

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