Маска ввода номера телефона с помощью 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("ОК!");}}); На этом вся установка! Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |