Маска телефона в Classipress

Модернизация DMaster

Здравствуйте, уважаемые читатели! В этой статье я расскажу Вам, как можно улучшить форму подачи объявлений, а именно — сделать маску для поля ввода номера телефона. Для начала уточним, что же такое маска поля?
Регистрируясь на различных интернет-ресурсах наверняка Вы встречались с тем, что иногда в поле ввода номера телефона присутствует такая подсказка:

Поле ввода телефона в Classipress

Вот это и есть маска. Преимущество такой маски над обычным тегом «placeholder» заключается в том, что она не исчезает после клика по заполняемому полю.
Для реализации подобной фишки в Classipress мы не станем изобретать очередной велосипед, а применим готовое решение на базе популярного jQuery плагина Masked Input.

Первое, что нужно сделать – скачать с официального сайта сам плагин в виде файла jquery.maskedinput.min.js (или jquery.maskedinput.js) и поместить его в папку ../includes/js/

Подключать плагин будем в файлах create-listing.php и edit-listing.php шаблона следующим образом:

Затем создаем и подключаем саму маску. Для этого воспользуемся таким кодом:

Где #cp_phone — идентификатор пользовательского поля для ввода номера телефона,
а .mask(«+7 (999) 999-99-99») — маска c уже прописанным кодом страны, который будет выводиться по умолчанию. Девятки в маске означают, что в данном поле разрешено вводить только цифры от 0 до 9.

Следует заметить, что плагин поддерживает и другие значения для масок, которые могут Вам тоже пригодиться:
a — Все алфавитные значения (A-Z,a-z)
* — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)
Подробнее и с примерами можно почитать и посмотреть на сайте плагина Masked Input, а у меня на этом все. Удачных экспериментов!

D.Master

DMaster

Создание досок объявлений на шаблоне Classipress для Wordpress "под ключ". Помощь в установке на хостинг, настройке, локализации, модернизации шаблона, а также мелкие правки и корректировки под ваши нужды.

E-mail

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

  Отправляя комментарий я принимаю Политику кофиденциальности сайта *