» »

Маска ввода номера телефона с помощью jQuery

Маска ввода номера телефона с помощью jQuery

Не секрет, что на некоторых сайтах нужно вводить номер телефона, что под него нужно сделать маску, а точнее ввод в поле input на сайте. Сейчас не кого не удивить сотовым телефоном, где из этого можно сделать вывод. что пользователей все больше и больше имеют такие гаджеты. Что можно с уверенностью сказать, что мобильный стал тем атрибутом, что можно пользоваться в интернет пространстве.

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

Если вы используете такую функцию, где задействован номер сотового, то безусловно нужно на сайте имеет удобное поле для ввода, где прописывают номер в поле input, где для этого нужно создать маску ввода номера сотового телефона.

jQuery Masked Input Plugin - теперь появилась отличная возможность для произвольной маски, где будут вводится данные, например, это номер телефона, дата для, и многое другое, вплоть до серийного номера.

Пример как должно получиться, также есть demo страница, для просмотра.

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

Приступаем к установке:

Для начало нужно подключить библиотеку jQuery:

Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Первое, что нужно сделать, это подключить библиотеку jQuery и также плагин jquery.maskedinput:

1. Скачать: jquery.maskedinput.js

2. Скачать: jquery.maskedinput.min.js

Следует для инпута c id="phone" создаем маску:

Код
$("#phone").mask("+7 (999) 999 - 9999");

a — Алфавит (A-Z,a-z)

9 — Цифры (0-9)

* — Буквы и также цифры (A-Z,a-z,0-9)

Настройки:

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

Код
$("#phone").mask("+7 (999) 999 - 9999",{autoclear: false});

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

Код
$("#phone").mask("+7 (999) 999 - 9999",{placeholder:" "});

Остается плагин, который должен выполнять функцию, после того, как был произведен ввод данных:

Код
$("#phone").mask("+7 (999) 999 - 9999",{completed:function(){alert("ОК!");}});

На этом вся установка!

Демонстрация
05.10.2018 Просмотров: 184 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar