Войти Регистрация

Вход на сайт

Логин *
Пароль *
 

RSForm маска ввода телефона

Вторник, 27 октября 2020 04:38 Автор 

Столкнулся с очень интересным и мощным конструктором форм RSForm под управлением Joomla CMS. Кто хоть раз им пользовался понимает, что функционал данного конструктора сразу не освоить, а умеет этот компонент очень много! Не буду сильно расписывать данный конструктор, а перейду непосредственно к теме статьи. Хочу поделиться простым способом подключения ввода телефонного номера по определенной маске.

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

mask phone

При попадании в такое поле пользователю необходимо лишь последовательно набрать цифры и всё. Хотим также в RSForm :)

Предполагаем, что у нас уже есть созданная форма и в ней есть текстовое поле с названием phone (у всех названия разные, но мы запоминаем это).

Теперь нам нужно зайти в созданную форму и перейти на вкладку "Свойства". Слева выбираем пункт "CSS и Javascript" как показано на скриншоте ниже

 rsfp config

Перемещаемся вниз, нас интересует поле для ввода JavaScript

rsfp config js

В это поле вставляем следующий скрипт


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js" type="text/javascript">
<script type="text/javascript">jQuery(function($){
   $("#phone").attr( "placeholder", "+7 (___)-___-__-__" )
   $("#phone").mask("+7 (999)-999-99-99");
});

 

Обратите внимание на переменную #phone - это название вашего поля.

Сохраняем форму и смотрим результат :) Всем удачи!

P.S. Решение протестировано на Joomla 3.9.22 и конструкторе форм RSForm! Pro 2.3.16

Stanislav

Master's degree

Сайт: skopil.ru
Авторизуйтесь, чтобы получить возможность оставлять комментарии