Почему скрипт маски телефона maskedinput в Elementor работает некорректно?
Здравствуйте всем.
Скрипт в форме на странице Elementor работает, а в форме во всплывающем окне Elementor - нет. Кто-то может подсказать причину, и как с этим бороться?
Форму на странице я создавал тестовую. Она работает правильно. Я ее удалил.
Консоль не ругается.
Какая еще информация нужна для понимания проблемы?
Дополнительно
ACANDR @ACANDR Автор вопроса Ответ нашел.
Решение вопроса предложил Михаил Кобзарев: https://www.kobzarev.com/wordpress/masked-input-fo... Когда мы инициализируем скрипт маски, нужно изменить скрипт инициализации.
Стандартный:
jQuery(
function( $ ) {
$( 'input[type="tel"]' ).mask(
'+7-(999)-999-9999',
{
placeholder: ' '
}
);
}
);
Этот код работает в простой форме.
А для нормальной работы маски в форме в попапе нужен такой:
jQuery(
function( $ ) {
$( document ).on(
'elementor/popup/show',
function ( event, id, instance ) {
$( 'input[type="tel"]' ).mask(
'+7-(999)-999-9999',
{
placeholder: ' '
}
);
}
);
}
);
Но и этот вариант не идеален. Я вместо " 9 " употребил " * ", и все заработало.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Maskedinput в Elementor часто работает некорректно из-за того, что Elementor подгружает формы/попапы динамически. Скрипт маски запускается один раз при загрузке страницы, а нужное поле появляется позже или перерисовывается после AJAX.
Решение — инициализировать маску после событий Elementor и использовать делегирование/повторную инициализацию.
Пример:
jQuery(function ($) { function initPhoneMask(context) { $(context).find('input[type="tel"], .phone-mask').each(function () { const $input = $(this); if ($input.data('mask-initialized')) { return; } $input.mask('+7 (999) 999-99-99'); $input.data('mask-initialized', true); }); } initPhoneMask(document); $(window).on('elementor/frontend/init', function () { elementorFrontend.hooks.addAction('frontend/element_ready/global', function ($scope) { initPhoneMask($scope); }); }); });jQuery(function ($) { function initPhoneMask(context) { $(context).find('input[type="tel"], .phone-mask').each(function () { const $input = $(this); if ($input.data('mask-initialized')) { return; } $input.mask('+7 (999) 999-99-99'); $input.data('mask-initialized', true); }); } initPhoneMask(document); $(window).on('elementor/frontend/init', function () { elementorFrontend.hooks.addAction('frontend/element_ready/global', function ($scope) { initPhoneMask($scope); }); }); });
Также проверьте порядок подключения: сначала jQuery, потом maskedinput, потом ваш код инициализации. Если плагин оптимизации переносит JS в конец или откладывает выполнение, маска может запускаться раньше библиотеки.
Если форма находится в Elementor Popup, отдельно проверьте событие открытия попапа. Иногда маску нужно включать после открытия, когда поле уже реально есть в DOM.