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

В этом уроке мы разберем, как делается маска телефона в Elementor и как переместить курсор ввода цифр в начало формы.

Также с помощью этого способа можно добавить маску ввода номера телефона для Contact Form 7 и любых других форм в WordPress.

Подключать маску для телефона мы будем с помощью скрипта jQuery.Maskedinput

Подключение скрипта Maskedinput

Подключить данный скрипт можно разными способами, мы рассмотрим два.

Подключение из стороннего источника

Если не хотите заморачиваться со скачиванием файла и заливкой его на свой хостинг, то просто пропишите в head путь к нему из стороннего источника.

<script src="https://cdn.jsdelivr.net/npm/jquery.maskedinput@1.4.1/src/jquery.maskedinput.min.js" type="text/javascript"></script>

Подключение из своего источника

Для этого нужно скачать и загрузить к себе на хостинг файл jquery.maskedinput.min.js (ссылка для скачивания будет в конце статьи), а затем подключить его через файл functions.php

// маска телефона
function wp_bis_add_scripts() {
wp_register_script( 'jquery.maskedinput.min.js', '/js/jquery.maskedinput.min.js', array(), NULL, true);
wp_enqueue_script( 'jquery.maskedinput.min.js' );
}
add_action('wp_enqueue_scripts', 'wp_bis_add_scripts');

'/js/jquery.maskedinput.min.js' - это указан путь к файлу, куда мы загрузили файл.

Активация маски в Elementor

Для активации маски прописываем следующий код.

<script type="text/javascript"> 
jQuery(document).ready(function($) {
  $('input[type="tel"]').mask("+7(999)999-99-99",{placeholder:"_"});
});
</script>

Куда этот код добавлять?

Если у вас Elementor Pro, то идём в раздел "Elementor/пользовательский код" и добавляем написанный выше код. Местоположение указываем </body> - End.

Если у вас обычный Элементор, то используем какой-нибудь плагин для вставки кода (например Code snippets), либо делаем это вручную.

Решение проблемы со всплывающей формой

В Elementor Pro маска ввода телефона не работает во всплывающих формах (в popup). Для решения этой проблемы во всплывающей форме надо прописать предыдущий код прямо под формой, с помощью вставки html кода. Либо добавить ещё один код, который срабатывает для popup окон.

<script type="text/javascript"> 
jQuery(
  function( $ ) {
    $( document ).on(
      'elementor/popup/show',
      function ( event, id, instance ) {
        $( 'input[type="tel"]' )
        .mask('+7(999)-999-99-99',{placeholder: '_'});
      }
    );    
  }
);
</script>

После этого можете наслаждаться работой маски при вводе телефонного номера. Данный способ проверен на Elementor версии 3.10, также должен корректно работать и на более ранних версиях.

Добавляем курсор в начало ввода номера

У скрипта Maskedinput есть некоторые недоработки. Одна из таких, это если кликнуть в середину поля ввода, то курсор там и останется, а не переместится в начало ввода. Чтобы решить эту проблему мы подключим ещё один маленький скриптик pos.js (скачать его можно по ссылке в конце статьи).

Подключение

В functions.php подключаем скрипт маски и автоматического позиционирования курсора.

// маска телефона и курсор в начало
function wp_bis_add_scripts() {
wp_register_script( 'jquery.maskedinput.min.js', '/js/jquery.maskedinput.min.js', array(), NULL, true);
wp_enqueue_script( 'jquery.maskedinput.min.js' );
wp_register_script( 'pos.js', '/js/pos.js', array(), NULL, true);
wp_enqueue_script( 'pos.js' );
}
add_action('wp_enqueue_scripts', 'wp_bis_add_scripts');

Далее добавляем обновлённые коды для активации скриптов.

Активация

Обычный код

<script type="text/javascript">
jQuery(document).ready(function($) {
$('input[type="tel"]').click(function(){
  $(this).setCursorPosition(3);})
	.mask("+7(999)999-99-99",{placeholder:"_"});
});
</script>

Для popup

<script type="text/javascript"> 
jQuery(
  function( $ ) {
    $( document ).on(
      'elementor/popup/show',
      function ( event, id, instance ) {
        $('input[type="tel"]').click(function(){
        $(this).setCursorPosition(3);
})
				.mask("+7(999)999-99-99",{placeholder:"_"});
      }
    );    
  }
);
</script>

Вот это значение указывает, после какого количества знаков должен встать курсор - setCursorPosition(3). В нашем случае это цифра 3. Если вы делаете маску, например для украинских (+380) или белорусских (+375) номеров, то эта цифра будет 5.

Архив со скриптами