Помощь Maskedinput для номера телефона

Ryan_93 · 19 Мар 2016

Привет всем!

Такой вопрос: кто подскажет, как внедрить jquery.maskedinput.min.js в оформление заказа на WooCommerce, чтобы при оформлении заказа была красивая маска номера телефона?

joylord · 19 Мар 2016

HTML:

$("#billing_phone").mask("(999) 99?9-9999");

Для просмотра ссылки Войди или Зарегистрируйся

Ryan_93 · 20 Мар 2016

joylord написал(а):
HTML:

$("#billing_phone").mask("(999) 99?9-9999");

Для просмотра ссылки Войди или Зарегистрируйся

Спасибо, но можешь разжевать? Увы, плохо знаю структуру шаблонов и плохо работаю с кодом :conf:

nulledpapa · 20 Мар 2016

Ryan_93 написал(а):
Спасибо, но можешь разжевать? Увы, плохо знаю структуру шаблонов и плохо работаю с кодом

Шаг 1.

Для этого нужно подключить к документу фреймворк jQuery и соответствующий плагин перед </head>:

<script type="text/javascript" src="jquery.js"></script> - если он есть не подключайте дважды это может стать конфликтом

<script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>

Шаг 2.

Далее вставим код, определяющий маски нашим формам перед </head>:

<script type="text/javascript">

jQuery(function($) {

$.mask.definitions['~']='[+-]';

$('#date').mask('99/99/9999');

$('#phone').mask('(999) 999-9999');

$('#phoneext').mask("(999) 999-9999? x99999");

$("#tin").mask("99-9999999");

$("#ssn").mask("999-99-9999");

$("#product").mask("a*-999-a999");

$("#eyescript").mask("~9.99 ~9.99 999");

});</script>

Вы можете определить маску так, как вам угодно.

9 - обозначает любую цифру, а - любую букву латинского алфавита, * - любой знак.

Определить значение символов вы также можете сами. Для этого в плагине jquery.maskedinput-1.2.2.js нужно изменить следующие строки:

definitions: {

'9': "[0-9]",

'a': "[A-Za-z]",

'*': "[A-Za-z0-9]"

Заменив [A-Za-z] на [A-Яa-я], получим возможность вводить кириллические символы вместо латинских.

Шаг 3.

При создании поля для ввода данных просто прописываем ему нужный идентификатор маски, добавляется id="phone".

Например:

<input id="phone" type="text" />

Маска для формы готова! Надеюсь, этот урок был для вас полезен!

Скрытое содержимое доступно для зарегистрированных пользователей!

Ryan_93 · 20 Мар 2016

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

Есть инструкция по внедрению этого кода в Wordpress, но для плагина Contact Form 7. Но как его внедрить в оформление заказа, не пойму

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

nulledpapa · 20 Мар 2016

Ryan_93 написал(а):
Не могу сказать "Спасибо", потому что не совсем понятно куда в Wordpress его подключать. Его ведь нужно на этапе оформления заказа втыкать. В какой шаблон добавлять. Не понятно

Есть инструкция по внедрению этого кода в Wordpress, но для плагина Contact Form 7. Но как его внедрить в оформление заказа, не пойму

блин ну пришли мне свои данные сервера фтп, какое поле и на какой страницея тебе сделаю там делается 2 минуты)))

joylord · 21 Мар 2016

Ryan_93 написал(а):
Спасибо, но можешь разжевать? Увы, плохо знаю структуру шаблонов и плохо работаю с кодом

Вставить в любое место файла footer.php в папке активного шаблона

<script type="text/javascript" src="Для просмотра ссылки Войди или Зарегистрируйся"></script>
<script type="text/javascript">
jQuery("#billing_phone").mask("(999) 99?9-9999");
</script>

areshin71 · 4 Авг 2016

Здравствуйте!
Добавление кода из предыдущего сообщения не добавляет маску ввода телефона на страницу оформления заказа woocommerce. Пробовал также добавить данный код в пределах <head>.
Помогите, пожалуйста!
Делаю данную доработку здесь: areshidz.bget.ru

nulledpapa · 8 Авг 2016

напиши в ЛС свой skype в ЛС! Помогу так как сайт твой выдает: 403 Forbidden

Помощь Maskedinput для номера телефона

Ryan_93

Создатель

joylord

Степной Волк

Ryan_93

Создатель

nulledpapa

Постоялец

Ryan_93

Создатель

nulledpapa

Постоялец

joylord

Степной Волк

areshin71

Гуру форума

nulledpapa

Постоялец