Маски ввода номера телефона для 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 - это класс поля, к которому применяется маска, он может быть любым

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

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

16 комментариев

  1. Сергей

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

    1. dimadv7

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

  2. Артур

    У вас в скрипте ошибка, поэтому не отображается обязательное заполнение поля с номером телефона

    1. Артур

      Сразу себя поправлю, это относится к исходникам в статье https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html

    2. dimadv7

      Артур, здравствуйте. Упустил что-то? Спасибо, что отписали. А где ошибка? У меня вроде работает все корректно.

    3. dimadv7

      Артур, спасибо. Действительно была ошибка во втором исходнике, поправил. Теперь все ок))

  3. viprogress777

    как сделать так чтоб вводились определенные номера операторов ? В нашем случае DEF код оператора

    1. dimadv7

      viprogress777, в смысле "как"? А как вы уже пробовали? С чем возникли сложности, какие ошибки получили? Как пытались с ними справиться?

    2. viprogress777

      dimadv7, я же тут спрашиваю, вроде вопрос норм задал.
      В общем мне надо чтоб вводились номера которые начинаются c +7700/+7701/+7702/+7705/+7707/+7777
      Например если человек введет номер +7763 - то такую не должен пропускать. А только из перечисленных выше

      +7777ххх хх хх - правильно и пропускает
      +7745ххх хх хх - неправильно и не пропускает

    3. dimadv7

      viprogress777, просто вы пишите " как сделать? ". Сделать это можно написав свой валидатор поля. То есть при клике на кнопку или при сбросе фокуса у поля, или в "реальном времени" при нажатии клавиши вызвать функцию-валидатор и проверять строку, которую получаем от пользователя. Брать первые 5 символов и сравнивать со значением, которое вам нужно. Если все ок и валидация прошла, то отправлять, если нет - выводить ошибку. Я поэтому и спросил, как вы уже пробовали и с какими сложностями столкнулись. Если вам нужна не помощь, а чтобы кто-то сделал за вас, то, наверное, это на фриланс лучше обратиться или, можете написать, в "ваши предложения", откуда я периодически беру идеи для статей, когда появляется свободное время.

    4. viprogress777

      dimadv7, спасибо за ответ, но я сам хочу, пробовал разные варианты но что не получается. Мне оба варианты по душе. Но конечно хотелось бы меньше нагрузки было на данный момент достаточно через паттерн. Так как вызвать валидатор и тд - это наверн долгий процесс, подключать скрипты, лишние коды... Зато конечно это идеальный вариант был бы

    5. dimadv7

      viprogress777, нет, обработка данных введенных пользователем это не долгий процесс, а валидация полей совсем не лишний код, а обязательный. Функция, которая вам нужно строчек 7-15 займет на jquery. Получить данные из поля, вырезать в переменную первые 5 символов, сверить их с допустимым и вернуть ошибку, либо продолжить отправку.

    6. viprogress777

      dimadv7, легко сказать, теоретический я знаю что она делает и как ))
      Мне бы сам код, я не прогер и не пишу, точнее не умею писать скрипты, умел бы тут вопрос не поднимал ))

    7. dimadv7

      viprogress777, вы же сказали, что сами хотите попробовать, теперь говорите, что хотите готовый код. Попробуйте сами, будут вопросы, задавайте. Я, или кто-то из подписчиков помогут, посоветуют что-то.

  4. semen

    Может кто знает как отследить количество введенных цифр в номере телефона в imask.js

  5. dimadv7

    semen, да, конечно, например, так:

    $('.классПоля').val().length
    

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