1

Тема: Маска ввода телефона

Здравствуйте!

Хочу сделать для поля ввода телефона маску ввода вида +7 (___) ___-__-__ скриптов для этого хватает, но есть 2 проблемы:

1. Все эти скрипты обращаются к полю по id или class у этого поля в форме обратной связи и в форме оформления заказа нет ни класса ни id, есть имя, но по имени что то обратиться не получается.

2. Непонятно как это реализовать во всплывающей форме

Повысить оценку Понизить оценку

2

Re: Маска ввода телефона

1. Все эти скрипты обращаются к полю по id или class у этого поля в форме обратной связи и в форме оформления заказа нет ни класса ни id, есть имя, но по имени что то обратиться не получается.

Всё просто

$('[name="ИМЯ ПОЛЯ"]')

2. Непонятно как это реализовать во всплывающей форме

Все обновления контента, а также действия всплывающих окон вызывают событие new-content.

Соответственно вешаемся на событие к body:

$("body").on("new-content", function(){
    //Мой код инициализации  
});

Ну уж если совсем не получается... То можно просто прописать код инициализации в сам шаблон обратной связи.

3

Re: Маска ввода телефона

Да, по имени получилось обратиться вот так  input[name="phone"]

А вот такая инициализация для всплывающих окон почему то не работает ((

$("body").on("new-content", function(){
    //Мой код инициализации  
});

А разместить инициализацию прямо в шаблон обратной связи не вариант, потому что js  у меня подгружаются внизу шаблона и инициализировать просто будет нечего.

Повысить оценку Понизить оценку

4

Re: Маска ввода телефона

Вообще-то когда открывается диалоговое окно, то все скрипты уже подгружжены, иначе бы диалоговое окно бы не открылось, а Вы просто бы перешли бы по ссылке.

Инициализация это не проблема, ведь Вы можете записать Ваш код на готовность всего документа:

$(document).ready(function(){
    //Сюда вставить код инициализации маски
});

Только это код надо вставить в сам шаблон.

Ну уж на крааайний случай:

$(window).on('load', function(){
    //Сюда вставить код инициализации маски
});

Хотя и предыдущего кода будет достаточно.

А вообще правильно, чтобы вверху у Вас оставался только jquery в секции head. А всё остальное можно вниз прятать. Тогда всегда всё будет работать.

5

Re: Маска ввода телефона

jquery подгрузил в секции head

Но все равно ни как не работает )

Вот если просто на странице фору открыть http://superwings-shop.ru/feedback-1/ то маска есть. А во всплывающем окне (синий ярлычок "обратный звонок" справа страницы" - ну никак не хочет работать ((

Повысить оценку Понизить оценку

6 Отредактировано Дмитрий (20.07.2016 11:20:07)

Re: Маска ввода телефона

Хм ) в итоге заработало только вот так ))

$("body").on("new-content", function(){

А как можно совместить

$("body").on("new-content", function() + $(document).ready(function()

))

Повысить оценку Понизить оценку

7 Отредактировано Закусило Александр (20.07.2016 11:22:18)

Re: Маска ввода телефона

Да, но только в таком порядке

$(document).ready(function(){
   //Ваш код инициализации

   $("body").on("new-content", function(){
         //Ваш код инициализации
   });
});

Т.е. сначала инициализируем, то что не в окне, а потом, то что в окне.

8

Re: Маска ввода телефона

Спасибо за помощь )

Повысить оценку Понизить оценку

9

Re: Маска ввода телефона

Закусило Александр пишет:

1. Все эти скрипты обращаются к полю по id или class у этого поля в форме обратной связи и в форме оформления заказа нет ни класса ни id, есть имя, но по имени что то обратиться не получается.

Всё просто

$('[name="ИМЯ ПОЛЯ"]')

А для некоторых непросто, вразумите пожалуйста.

Скрипт к странице подключен jquery.maskedinput-1.2.2.js

Вот скрипт, который обрабатывает поле ввода (тоже есть)

<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> 

А вот строка ввода

<tr>
    <td class="key">Телефон:</td>
    <td class="value">
            {$user.phone}
     </td>
</tr>  

Что нужно здесь "допилить", чтобы заработало?

10 Отредактировано Закусило Александр (27.09.2016 17:38:37)

Re: Маска ввода телефона

маска всегда применяется к полю ввода текста. А не просто к тексту.

<input name="phone" value="{$user.phone}"/>

<script type="text/javascript">
$('[name="phone"]').mask('(999) 999-9999');
</script>

Читайте документацию к плагинам