В этом уроке мы разберем, как делается маска телефона в 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.
10 ответов
1 - это не понятно всетаки что и куда.
2 - не работает.
Логично, что не работает, если вы не поняли что и куда прописывать. Не писал бы эту статью, если бы не опробовал этот способ на множестве проектов, где всё прекрасно работает.
Так в чем проблема прописать, что и куда вставлять?
Всё и так прописано проще некуда) Я, как мог, информацией поделился. Если что-то непонятно, то это уже не моя проблема. Всегда можно обратиться к тем, кто разбирается, а не предъявлять претензии.
Добрый день! Огромное спасибо за информацию: очень нужная. Но для начинающего можете уточнить: для всплывающей формы для маски телефона нужно вставить только один скрипт, верно? Подскажите пожалуйста пошагово, как добраться до того места, в которое нужно вставить код.
Добрый день! Уточните, с чем именно у вас проблема, с подключением скрипта или с его активацией? Один код нужно прописать для подключения скрипта, а другой для его активации.
Спасибо огромное!!!!! Все сработало с первого раза!
Здравствуйте - нужна еще функция проверки количества знаков, что бы пока весь номер не в ведешь, форма не отправлялась
Здравствуйте! Для этого в конце маски нужно добавить знак вопроса. Вот так .mask("+7(999)999-9999?"
неа, не работает paradeballet.ru первая кнопка записаться - не работает, форма отправляется от одного знака - а должна только от полного номера 999 999 99 99 , а не просто от одной 9