Создание сайтов на 1С-Битрикс

Маска телефона на чистом js

Скрипт-дополнение к imask.js позволяет правильно определять номер при ручном вводе или автозаполнении, а также может ставить галочки для правильно введенных полей формы и активировать кнопку "Отправить"

Маска телефона на чистом js Скрипт-дополнение к imask.js позволяет правильно определять номер при ручном вводе или автозаполнении, а также может ставить галочки для правильно введенных полей формы и активировать кнопку "Отправить"
Все говорят про маркетинг, короткий путь для клиента, удобство использования и т.д. А вот с обычным вводом телефона (как оказалось) продумано не все. Ну неудобно вводить номер телефона на российских страницах. А хочется чтобы одной кнопкой "Автозаполнить" все поля и нажать "Отправить". Хорошо? Хорошо. Читаем дальше…

Кратко

Скрипт, подключенный на странице:
  • не имеет зависимостей (не требует jQuery),
  • можно подключать в любом месте, на любой CMS или без нее,
  • срабатывает автоматически при загрузке DOM страницы,
  • обрабатывает все поля input[type="tel"] и добавляет к ним маску телефона,
  • проверяет в этой же форме поля с атрибутом required и при их заполнении (с телефоном) убирает у кнопки «Отправить» класс disabled,
  • проверяет email на корректность,
  • добавляет галочки заполненным полям (можно отключить).
Рекомендуемый html-код для поля телефона:
<input type="tel" autocomplete="tel" placeholder="Номер телефона" required>
Обратите внимание на атрибуты autocomplete и required:
  • autocomplete подсказывает устройству что нужно заполнять,
  • required устанавливает это поле обязательным для заполнения, при этом форма не отправится пока не будет хоть что-то в этом поле (отмена проверки браузером, но не скриптом — атрибут novalidate). Также в Safari при наведении курсора появляется иконка автозаполнения.
Скачать

Предыстория

Началась все с того, что к нам обратился клиент, которому в базу сыпались телефонные номера без последней цифры. Примерно так: +7 (896) 143-50-50, хотя это должен быть номер 8 (961) 435-05-00.
Тестирование показало что номера, записанные в телефоне с начальной цифрой 8 так и вставлялись при помощи автозаполнения, а скрипт маски обрезал последнюю цифру. Мы испробовали все возможные варианты ввода телефона — автозаполнение и ручной ввод разных вариантов номеров - начиная с семерки, с плюса, с восьмерки, с пробелами, без пробелов, с дефисами и без.
Перебрав скрипты для масок, остановились на imask.js от Алексея Кряжева.
Скрипт крутой и универсальный - он на чистом, как говорится, vanilla native js, много типов масок, динамичная смена маски, api, документация.
Мы дописали нужный вызов и проверку на семерку или восьмерку в начале. Плюс плюшки в виде галочек и интуитивно понятное включение/отключение кнопки submit.

Как это работает?

Скрипт проверяет страницу на вхождение input[type="tel"] и выставляет им маску телефона.

Если вызов функции с параметром true - maskInit(true) - и в форме присутствуют инпуты с autocomplete=" name / given-name / email " и с атрибутом required, то они оборачиваются div`ом с классом wrap-input-for-icons, после поля добавляется div с классом icon-check и в head страницы добавляется CSS для галочек и кнопки «Отправить».
Если после input[type="email"] имеет атрибут required, то проверяет его с помощью regex^[\w\-.]+@[\w-]+\.([\w-]+\.)?[a-z]{2,12}$ и ставит галочку когда email введен корректно.

При вводе номера телефона проверяется:
  • если первая нажатый символ — восьмерка, то маска изменяется и начинается с восьмерки, таким образом вписываются номера, начинающиеся с восьмерки, как мобильные, так и городские или службы 8-800
  • если же номер вставляется (вставкой или автозаполнением), то также проверяется наличие первой восьмерки и если найдено, то маска модифицируется под формат 8 (000) 000-00-00,
  • при удалении всех цифр маска возвращается в начальное состояние, ожидая +7 в начале (можно вводить и плюс и семерку).

Если форма обновляется через ajax (на Битриксе), то делаем инициализацию еще раз (заодно проверяем определена ли переменная BX для избежания ошибок):
if (typeof BX !== 'undefined') {
        // eslint-disable-next-line no-undef
        BX.addCustomEvent('onAjaxSuccess', function() {
            maskInit(true);
        });
    }

Как установить

Нужно подключить скрипт, желательно в конце страницы, перед закрывающим тегом body.
Простое подключение:
<script src="/js/imasked.min.js"></script>
Или для Битрикса:
<?
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH.'/js/imasked.min.js');
?>
Проверьте путь к скрипту.

Пример формы, к которой будет применяться скрипт:
<form>
	<input type="text" autocomplete="name" placeholder="Ваше имя" required>
	<input type="tel" autocomplete="tel" placeholder="Номер телефона" required>
	<input type="email" autocomplete="email" placeholder="E-mail">
	<input type="submit">
</form>

Настройки

Цвет галочки - #5ab85a (салатовый). Чтобы задать свой цвет, добавьте в свой CSS правило:
:root {
  --check-mark-color: #ffd445; /* Цвет галочки в формах */
}
Чтобы отключить галочки и включение/отключение кнопки «Отправить» нужно заменить в скрипте код maskInit() на maskInit(false).

Скачать:

imasked.js.zip (38.75 КБ)
imasked.min.js.zip (20.15 КБ)
Логотип SiteBERG
Изменено: 07.04.2022 16:25

Популярное

Что нужно сделать?