Главная / Уроки / 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.

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

Плагин маски ввода для для Elementor

У кого не получается или не хотите заморачиваться с кодом, можно воспользоваться моим готовым плагином Elementor Phone Mask. Он работает, как с обычными формами, так и со всплывающими. Курсор автоматически перенаправляется в начало ввода номера. Также в нём реализована функция удаления лишней цифры "8" в начале номера, когда уже прописана +7. Пока плагин работает только для российских номеров. Кому нужна адаптация под другие страны - пишите в личку.

18 ответов

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

        1. Всё и так прописано проще некуда) Я, как мог, информацией поделился. Если что-то непонятно, то это уже не моя проблема. Всегда можно обратиться к тем, кто разбирается, а не предъявлять претензии.

          1. Добрый день! Огромное спасибо за информацию: очень нужная. Но для начинающего можете уточнить: для всплывающей формы для маски телефона нужно вставить только один скрипт, верно? Подскажите пожалуйста пошагово, как добраться до того места, в которое нужно вставить код.

          2. Добрый день! Уточните, с чем именно у вас проблема, с подключением скрипта или с его активацией? Один код нужно прописать для подключения скрипта, а другой для его активации.

  1. Здравствуйте - нужна еще функция проверки количества знаков, что бы пока весь номер не в ведешь, форма не отправлялась

    1. Здравствуйте! Для этого в конце маски нужно добавить знак вопроса. Вот так .mask("+7(999)999-9999?"

      1. неа, не работает paradeballet.ru первая кнопка записаться - не работает, форма отправляется от одного знака - а должна только от полного номера 999 999 99 99 , а не просто от одной 9

  2. Привет.
    Добавляем курсор в начало ввода номера.
    Пишите скачать скрипт pos.js. И что с ним делать далее? Куда его загрузить?
    Также вопрос.
    В functions.php подключаем скрипт маски и автоматического позиционирования курсора.
    Тут путь указан к скрипту pos.js. Это путь к Вашему расположению? Его менять надо?
    Буду признателен за подробный ответ по всем пунктам вопроса.

    1. Добрый день! Скрипт pos.js подключается также, как и скрипт maskedinput.js. Закачиваете скрипт к себе на хостинг, а в functions.php подключаете его, естественно прописав свой путь к файлу на хостинге. Смотрите первую часть статьи, там про это написано.

  3. В том то и дело, что скрипт maskedinput.js, я подключил из стороннего источника, как Вы показали.
    А есть такая же возможность подключить pos.js из стороннего источника?
    Если нет, то куда именно надо загрузить? В public_html? Создать там папку и закинуть в неё?
    Я просто никогда ранее js файлы не загружал и не использовал.
    Извините, если вопрос слишком примитивный, но если не сложно опишите, пожалуйста.

    1. Да. Заходите в public_html, там, где у вас находятся папки сайта и создаёте папку js, а в неё загружаете этот файл. Тогда мой код вам менять не надо, т.к. эта папка там уже прописана. А так можете в любое место закинуть этот файл.

      1. Одно уточнение.
        Именно в functions.php надо будет код добавить? Не сработает, если добавить в пользовательский код Элементора в админке?

  4. Спасибо, куда устанавливать разобрался, да и в целом действие кода понятно. Но столкнулся с проблемой, код работает, когда залогинен под админом, а для всех не активируется? Не подскажете в чем может быть проблема?

    1. Надо смотреть код страницы и какие ошибки там выскакивают. Скорее всего библиотеки не в той последовательности подключается. Попробуйте вручную пересоздать CSS и синхронизировать библиотеку в настройках Elementor - есть у него такой косяк.

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

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