Перейти к содержимому
BIS Arts
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
Whatsapp Telegram-plane
+7(900)247-59-69
Главная / Уроки / Elementor / Маска ввода телефона для Elementor

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

  • 5 февраля, 2023
  • 18 комментов
маска телефона
Содержание

В этом уроке мы разберем, как делается маска телефона в 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.

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

Maskedinput_and_CursorpositionСкачать

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

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

18 ответов

  1. Владимир Коринюк:
    17.03.2023 в 08:38

    1 - это не понятно всетаки что и куда.
    2 - не работает.

    Ответить
    1. Администратор:
      17.03.2023 в 15:53

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

      Ответить
      1. Сергей:
        18.08.2023 в 16:36

        Так в чем проблема прописать, что и куда вставлять?

        Ответить
        1. Администратор:
          18.08.2023 в 17:19

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

          Ответить
          1. Лида:
            27.08.2023 в 15:46

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

          2. Администратор:
            27.08.2023 в 16:50

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

  2. Виталий:
    07.06.2023 в 21:39

    Спасибо огромное!!!!! Все сработало с первого раза!

    Ответить
  3. Н:
    26.09.2023 в 13:00

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

    Ответить
    1. Администратор:
      26.09.2023 в 17:30

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

      Ответить
      1. Н:
        26.09.2023 в 18:51

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

        Ответить
  4. Макс:
    10.10.2023 в 11:45

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

    Ответить
    1. Администратор:
      10.10.2023 в 12:12

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

      Ответить
  5. Макс:
    10.10.2023 в 12:43

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

    Ответить
    1. Администратор:
      10.10.2023 в 13:06

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

      Ответить
      1. Макс:
        10.10.2023 в 13:22

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

        Ответить
        1. Администратор:
          10.10.2023 в 13:28

          Да, именно в functions.php!

          Ответить
  6. Влад:
    04.01.2024 в 09:15

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

    Ответить
    1. Администратор:
      05.01.2024 в 16:42

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

      Ответить

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

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

Категории
Сайтостроение
Сайтостроение
WordPress
WordPress
WooCommerce
Elementor
elementor
Дизайн
Монетизация
Монетизация
реклама
BIS Arts

Услуги по созданию и обслуживанию сайтов

  • Услуги
  • Портфолио
  • Отзывы
+7 (900) 247-59-69
пн-пт с 10:00 до 19:00
Whatsapp Telegram Envelope
Copyright © 2013 — 2025 BIS Arts
Политика конфиденциальности
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • +7 (900) 247-59-69
  • Написать в Whatsapp
  • Написать в Telegram
Свяжитесь с нами
  • Позвонить
  • Написать в WhatsApp
  • Написать в Telegram
  • Написать письмо
Позвонить
Написать в WhatsApp
Написать в Telegram
Написать письмо