Smartlanding

Маски ввода номера телефона для landing page

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

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

Если погуглить сейчас «Маску ввода номера телефона», то вы обязательно наткнетесь на Maskedinput, он действительно популярный. О нем была и моя статья, но как я понял, автор этого плагина не собирается решать проблему, поэтому я решил найти пару альтернатив, тем более многие из подписчиков просили об этом.

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

Imaskjs

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

Подключается с авторского CDN в одну строку, хотя исходный код доступен на Github. Есть возможность подключения в виде плагина для Vue, React, Angular и React Native. Поддерживает не только маску ввода номера, но и для других полей и типов данных.

Если подключать через CDN, то делается это так. Где-нибудь перед закрывающим тегом «body», подключите сам скрипт:

<script src="https://unpkg.com/imask"></script>

Затем необходимо его инициализировать. Например, так:

<script>
var elements = document.getElementsByClassName('imaskjs__input_tel');
for (var i = 0; i < elements.length; i++) {
  new IMask(elements[i], {
    mask: '+{3}(000)000-00-00',
  });
}
</script>

imaskjs__input_tel — это класс ваше поля с телефоном, он может быть любым.

jQuery Mask Plugin

Еще один неплохой скрипт, который прекрасно решает свою задачу, но на этот раз выполнен в виде jQuery-плагина. Делает маски не только полей с номером телефона, но и маскирует многие другие типы в нужном формате. На сайте разработчика их около 20 штук. Там же есть ссылка и на репозиторий в Github.

Как и в прошлом варианте есть возможность подключения через CDN, но, если любите все контролировать у себя на сервере, то можете и скачать исходник.

Подключить к сайту можно так:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- jQuery Mask Plugin -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
 <script>
  $(function() {
    $('.jmp__input_tel').mask('+7(000)000-00-00');
  });
 </script>	
 <!-- /jQuery Mask Plugin -->

.jmp__input_tel — это класс поля, к которому применяется маска, он может быть любым

Вот, можете попробовать сами:

Посмотреть пример

Поделитесь статьей в социальных сетях, чтобы не потерять

2 комментария

  • Сергей

    Спасибо, полезная информация.
    Кстати, а почему в smartLid не добавлена маска номера?

    Ответить
  • dimadv7

    Да вот, в ближайшее время добавлю. Пока руки не дошли)

    Ответить

Добавить комментарий