Как сделать маску ввода телефонного номера?

Question

[mUchenik]

Доброго дня, уважаемые специалисты!
Прошу вашего совета:
В woocommerce, на странице оформления заказа, в пункте ввода телефонного номера, хочу реализовать маску вида: +7(___)-__-__-___ (по умолчанию), что бы ни какие другие знаки кроме цифр не вводились.
Но проблема в том, что я не могу понять, какой файл редактировать и что писать.
Нашел разные плагины, но ума не приложу как прописывать их правильно.
Пробовал этот digitalbush.com/projects/masked-input-plugin ни чего не сработало :(
(хотя скорее всего руки кривые )
Может ли кто то рассказать "На пальцах" как установить?
Не посчитайте за наглость.... Не смог сам разобраться.
Вот что я делал:
В файле header.php, перед прописал:

<script type="text/javascript" src="zerif-lite/js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="zerif-lite/js/jquery.maskedinput-1.3.min.js"></script>
<script>
$("#billing_phone").mask("(999) 99-99-999");


$("#billing_phone").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );
    
    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;
        
        var first = $(this).val().substr( 0, 9 );
        
        $(this).val( first + '-' + lastfour );
    }
});
</script>

Если важно то шаблон Zerif Lite

Answer 1

[Алекс Глебов]

когда выполняется скрипт в хедере, элемент #billing_phone еще не создан браузером, вот и не работает.
обернуть надо

$(document).ready(function() {
$("#billing_phone").mask("(999) 99-99-999");


$("#billing_phone").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );
    
    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;
        
        var first = $(this).val().substr( 0, 9 );
        
        $(this).val( first + '-' + lastfour );
    }
});
}

или переместить ваш код в футер

Comments

[mUchenik]

Спасибо за ваш коммент, но ни какой реакции нет :( ни чего понять не могу... Если важно, вот ссылка: boulinaw.bget.ru/checkout

[Алекс Глебов]

файлов скриптов нету по путям которые указаны. перехожу по ним, мне пишет error
заменить на эти

[Алекс Глебов]

https://code.jquery.com/jquery-1.7.2.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.mask...

[mUchenik]

Алекс Глебов: Спасибо за совет! Есть одно маленькое НО!!! Скрипт срабатывает только! если прописать адрес этого скрипта в web. Но если я копирую содержимое скрипта и создаю файл, кидаю эти файлы в папку JS то скрипт ни как не хочет работать... Возможно ли это поправить?

[Алекс Глебов]

mUchenik: точно не скажу, но у вас на сайте скрипты подключаются динамически. Нужно найти в поиске по проекту или по базе по путям подключения и подключить новые аналогично. и положить их в туже папку в которой есть подключенные скрипты.

Если не получится, то способ через сеть доставки контента тоже надежный. Его рекомендуют использовать вместо локального. И высока вероятность, что библиотека есть уже у пользователя в кеше.

[Алекс Глебов]

savepic.su/7479979.jpg

[mUchenik]

Алекс Глебов: Спасибо :)

Answer 2

[Сергей]

или переместить ваш код в футер

или использовать delegate
api.jquery.com/delegate

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

хотя если элемент единственный, судя по селектору правильней будет послушать предыдущего оратора -))