Главная
Web-дизайн
Маска ввода номера телефона

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

Маска номера

Доброго времени суток 🙂

Данную статью решил написать, потому как часто пользуюсь данной вещь, а на сайте о ней почему-то раньше не рассказал. Как Вы успели догадаться, речь пойдет о маске ввода телефонного номера. Если вы заметили, а может еще и нет, я сделал плагин обратного звонка для WordPress и других систем или страниц, посмотреть его можно здесь - Плагин заказа обратного звонка.

По умолчанию, на этом плагине маски нет, потому как его покупают из разных стран, также некоторым он нужен для ввода городских номеров и тд. По желанию заказчиков я часто устанавливаю маску ввода номера, если они хотят упорядочить ввод номера и задать определенный стандарт.

Выглядит это примерно так:

Пример маски

Чтобы установить маску ввода номера, нужно подключить несколько скриптов. Начнем пожалуй из подключения библиотеки jQuery. В шапку сайта перед закрывающимся head или в подвал перед закрывающимсяbody добавьте вот такую строку кода:

Если Вы уже подключали или это сделано до вас и в Вашем коде есть схожая строка, возможно с другой версией, то делать это повторно не следует.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Далее Вам надо скачать файл maskinput.js, внутри которого плагин для обработки маски. Потом залить себе на сайт например в папку js и подключаем после библиотеки jquery. Получится это примерно так:



Скачать


<script src="js/maskinput.js"></script>

Далее, мы добавляем последний из скриптов, который и создаст вид нашей маски, то есть то что будет видно внутри формы ввода. После библиотеки и плагина добавляем вот такой код:

<script type="text/javascript">
   jQuery(function($){
   $("#tel").mask("+38(999) 999-9999");
   });
</script>

Как видите мы задали маску и теперь человек в поле ввода увидит вот такой вид - +380(___) ___-____. Плагин маски устроен так, что все девятки - 9 меняет на нижний прочерк - _.

Есть момент. Если вам в коде нужно задать девятку, чтобы ее было видно, у Вас проблема 🙂 ее заменит прочерком то есть получится, если вам надо так 95(__)____ у вас выйдет так _5(__)____
Как решить этот вопрос я пока не нашел.

Перед маской указывается - ID в данном примере это #tel. То есть к полю ввода input у которого такой айди будет применена маска.

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

<input type="tel" id="tel" name="tel" placeholder="Введите ваш телефон">

Благодаря placeholder сначала в поле будет текст, а при нажатии по нему появится маска. можете маску ввести сразу, тогда она будет и там и там.

Вот собственно и вся маска. Также хочу добавить, что можно указывать разные маски одновременно для разных полей ввода, например так:

jQuery(function($){
	$("#tel").mask("+38(999) 999-9999");
	$("#date").mask("99/99/9999");
	$("#card").mask("9999-9999-9999");
});

Здесь мы задали маски для трех полей с разными масками. Первое у нас телефон, второе дата, а третье, например карточка скидок.Соответственно в полях для ввода, при вводе будет показано следующее:

+38(___) ___-____
__/__/____
____-____-____

Данные примеры все касались цифровых вводов, но есть еще и другие.

  • 9 — Как Вы поняли, если вбить ее, то все девятки можно заменить только на цифровые значения (0-9)
  • a — Если в маске указать данный символ, ну например - .mask("aaaаааа"). То можно будет ввести буквы на латинице, то есть значения (A-Z,a-z).
  • * — Укажите данный символ и в поле ввода можно вводить все что угодно(A-Z,a-z,0-9)

Конечно по желанию Вы сможете комбинировать параметры, например - .mask("aaaа-999999"). Такая маска, конечно же с другим количеством символом подойдет для ввода номера паспорта и серии или кошелька webmoney и тд.

Что я думаю по поводу маски? Определенно не скажу. Вещь удобная и направляет пользователя на правильность ввода. Смотрится красиво, НО! Как обычно у меня - Но. если бы маска была просто маленьким кусочком скрипта, я не против, но для ее работы подключается целый плагин, то есть это дополнительная нагрузка.

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

Очень надеюсь, что данная статья поможет Вам! Можете поделится в комментариях, где Вы используете маску.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 14, в среднем: 5 из 5

Опубликовано 5 комментариев

  • Эдуард
    Комментариев: 1

    Добрый день!
    Скачал Вашу маску. установил. Все работает за исключением одного момента. Маска не появляется. Просто пустое поле. а при нажатии клавиши появляется цифра и заполняется в соответствии с маской, но подчеркиваний нет.

    • Виталий
      Комментариев: 412

      Нужна ссылка на сайт, чтобы увидеть проблему. Маска работает 100% она установлена на моих двух плагинах, да и в 80% других форм в интернете. Маска не моя, это плагин довольно популярный Если он не правильно отображается, скорее всего допущена или ошибка или происходит конфликт со стилями сайта.

  • Перт
    Комментариев: 3

    Здравствуйте!
    Может знаете, как можно в месте для кода страны, где сейчас в коде две цифры. Как сделать, чтобы можно было указывать код страны из одной или двух цифр?
    Например в России код страны 7, в Украине 38, одно правило для разных стран не подходит.
    Если одну цифру не допечатать, тогда поле телефона очищается.
    Заранее спасибо!

    Еще один момент, у кого сайт с https, подключая библиотеку, при копировании ссылки, не забудьте поменять протокол в ссылке. Долго мучился, не мог понять, почему не хочет работать, браузер блокирует, заметил это не зразу. Забыл про это, что на https, весь контент с http считается как не безопасный.

    • Виталий
      Комментариев: 412

      Есть у меня статья, где решение вашей проблемы - http://gnatkovsky.com.ua/izmenenie-znacheniya-input-pri-smene-znacheniya-select.html

      • Перт
        Комментариев: 3

        Спасибо за ссылку, немного не то, хотелось бы, чтобы все было в одном поле. Пока попробую этот вариант. Спасибо еще раз!

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко