Связаться
+79263772075
info@el-komp.ru

Blog

Маска для ввода номера телефона на сайт с Elementor

Маска для ввода номера телефона на сайт с 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

Leave a comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Top Яндекс.Метрика