Маска для ввода номера телефона на сайт с Elementor
В сети много вариантов реализации, однако, все что я пробовал работало не очень корректно.
Представляю решение, которое работает на 100% во всех браузерах и всех формах, как в обычных, так и в popup.
1. В файл functions.php (или в сниппет, если есть такой плагин у вас) нашей темы, в конце всех записей, вставляем код:
function bssite_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('inputmask', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.6/jquery.inputmask.min.js', array('jquery'), '5.0.6', true);
}
add_action('wp_enqueue_scripts', 'bssite_scripts');
2. Вставляем в footer.php темы (или в сниппет, если есть такой плагин у вас), перед закрывающим тегом </body> код для постановки маски номера всех форм на сайте (не popup):
<script type="text/javascript">
jQuery(document).ready(function($) {
$("input[type='tel']").inputmask("8(999)999-99-99", { "clearIncomplete": true });
});
</script>
3. Добавляем элемент HTML к нашей форме через Elementor, размещаем в самом верху нашей формы новый html виджет (для работы с popup) и вставляем следующий код:
<script type="text/javascript">
jQuery(document).ready(function($) {
function applyInputMask() {
$("input[type='tel']").inputmask("8(999)999-99-99", { "clearIncomplete": true });
}
// Инициализация маски при загрузке документа
applyInputMask();
// Инициализация маски при показе попапа
jQuery(document).on('elementor/popup/show', function (event, id, instance) {
applyInputMask();
});
});
</script>
И все работает:
Прим.: Не все версии Elementor поддерживают пробелы и знаки +
Поэтому у меня, к примеру, не вышло указать номер так: 8 (999) 999-99-99 или +7 (999) 999-99-99

