Главная / Уроки / Elementor / Маска ввода телефона для Elementor

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

код маски ввода для Elementor

Если у вас обычный Элементор, то используем какой-нибудь плагин для вставки кода (например 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.

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

2 ответа

    1. Логично, что не работает, если вы не поняли что и куда прописывать. Не писал бы эту статью, если бы не опробовал этот способ на множестве проектов, где всё прекрасно работает.

Добавить комментарий

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