Случилось такое дело, что столкнулся с созданием формы на Contact Form 7 и там были поля ввода телефона с маской для ввода. Вроде бы всё просто, но контакт форм не поддерживает маску, поэтому пришлось поискать решение, как это сделать. Изначально была надежда, что поставлю плагин для этого и всё будет сделано. Но плагина не оказалось, был один или два старых, которые не работали как надо. Значит пришлось решать этот вопрос, а, чтобы не забыть написать статью, возможно пригодится и другим такое решение.
Содержание
Задача решения: сделать поле с маской ввода и placeholder поле в котором бы сразу отображалось, что нужно вводить номер и его вид. Начинаем решение задачи по пунктам:
Скрипт для отображения маски телефона
Нашёл разработку скрипта, вот его описание:
Это замаскированный вход плагин для JQuery библиотеки JavaScript. Это позволяет пользователю более легко вводить фиксированную ширину входа, где вы хотели бы их, чтобы ввести данные в определённом формате (даты, номера телефонов и т.д.). Он был протестирован на Internet Explorer, Firefox, Safari, Opera и Chrome. Маска определяется формат, состоящий из маски литералов и определения маски. Любой символ, не в списке определений ниже считается маска буквальным. Маска литералы будет автоматически введена для пользователя , как они печатают и не смогут быть удалены. Определения следующих масок предопределены:
а — Представляет альфа-символ (AZ, AZ)
9 — Представляет цифровой символ (0-9)
* — Представляет алфавитно-цифровые символы (AZ, AZ, 0-9)
Теперь его надо скачать к себе, брать тут.
Заливаем скрипт в шаблон сайта
После того как вы скачали скрипт надо залить его с названием jquery.maskedinput.min.js в папку JS вашего шаблона сайта. Если такой папки нет, то создать её.
Добавление в function.php
После того как файл залит, нам необходимо добавить функцию в function.php темы сайта. Заходим в шаблон, находим function.php и в конце добавляем сразу вот такой код вызова функции и исполнения:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input'); function wpmidia_enqueue_masked_input(){ wp_enqueue_script('masked-input', get_template_directory_uri().'/js/jquery.maskedinput.min.js', array('jquery')); } add_action('wp_footer', 'wpmidia_activate_masked_input'); function wpmidia_activate_masked_input(){ ?> <script type="text/javascript"> jQuery( function($){ $(".data").mask("99/99/9999"); $(".tel").mask("(99) 9999-9999"); $(".cpf").mask("999.999.999-99"); $(".cnpj").mask("99.999.999/9999-99"); }); </script> <?php } |
Настройка вида маски телефона
Для того чтобы настроить правильно маску телефона, используйте вариацию $(«.tel»).mask(«(99) 9999-9999»);. Я например сделал вот так у себя.
|
1 2 3 4 5 6 |
<div class="col-md-4"> <div class="form-group"> <label for="contact-name">Телефон *</label> [tel* tel id:tel class:tel placeholder"+345 (__) ___-__-__"] </div> </div> |
Соответственно дальше в поле формы вставляете вот таким вот кодом, как на картинке ниже. После этого у вас будет работать маска телефона в обычном contact form 7 на сайте wordpress. Удачной вам работы!
А где картинка?
Ая всё думал как в обычный контакт форм добавить маску)