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

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

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

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

  • Сергей

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

    Ответить
  • dimadv7

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

    Ответить
  • Артур

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

    Ответить
  • Артур

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

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

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

    Ответить
  • viprogress777

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

    Ответить
  • dimadv7

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

    Ответить
  • viprogress777

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

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

    Ответить
  • dimadv7

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

    Ответить
  • viprogress777

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

    Ответить
  • dimadv7

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

    Ответить
  • viprogress777

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

    Ответить
  • dimadv7

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

    Ответить

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

 

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