Маска телефона на чистом 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).