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

Модернизация 219
  ВНИМАНИЕ:
Этот пост опубликован более года назад и в связи с выходом новых версий Classipress и WordPress, возможно, потерял свою актуальность.

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

Поле ввода телефона в 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