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

Часто решение простой задачи оборачивается в целое приключение и бессонные ночи. Вашему вниманию представлен код, который будет работать, как у обычных полей, так и во всплывающих окнах Elementor.

Шаг 1

Добавить в functions.php

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
  wp_enqueue_script( 'maskedinput', get_template_directory_uri() . '/js/jquery.maskedinput.min.js');
}

Файл jquery.maskedinput.min.js можно взять отсюда.


Шаг 2

В административной панели Elementor -> Custom Code -> Добавить новый код

<script>
// Для обычных полей
jQuery(
  function( $ ) {
    $( 'input[name="form_fields[phone]"]' ).mask(
      '+7 (999) 999-99-99',
      {
        placeholder: '+7 (___) ___-__-__'
      }
    );
  }
);
// Для Popup окон
jQuery(
  function( $ ) {
    $(document).on(
      'elementor/popup/show',
      function ( event, id, instance ) {
        $( 'input[name="form_fields[phone]"]' ).mask(
          '+7 (999) 999-99-99',
          {
            placeholder: '+7 (___) ___-__-__'
          }
        );
      }
    );    
  }
);
</script>

Обратите внимание: input поле не должно быть типа tel, это должно быть обычное текстовое поле. В качестве ID поля телефона укажите просто: phone.

ВКонтакте
Facebook
WhatsApp
Telegram
Автор статьи
Выгодный хостинг
Хостинг Beget

Выгодная партнёрская программа! Верните на свой счёт 20% с любой суммы от оплаты хостинга Beget!

Новое в блоге

Смотрите также

Мессенджеры

Написать сообщение

Отправлено!

Мы свяжемся с вами в ближайшее время.