Добрый день. Сегодня мы еще немного улучшим наши формы обратной связи. Я расскажу вам как сделать маску для наших форм обратной связи. В первую очередь — это может быть полезно с точки зрения безопасности сайта.
Мы не позволим вводить в поле лишние символы, а во вторую — пользователю будет понятно в каком именно формате мы хотим получить от него данные. Например, дату рождения, номер телефона и т.д.
Для того, чтобы вы понимали о чем речь:
Наверняка вы видели подобные эффекты на других сайтах. Когда можно ввести данные только в определенной последовательности.
Теперь давайте разбираться как сделать такую маску для ввода номера телефона. Первое, что нужно сделать — это подключить библиотеку jQuery:
Теперь необходимо скачать и подключить плагин maskedinput.js. Скачать его можно с официального сайта, а подключаем следующим образом:
Теперь необходимо создать саму маску. Для этого воспользуемся следующим кодом:
Где #phone — идентификатор поля с номером телефона, а .mask(«(999) 999-9999») — маска. Цифра девять означает, что в данном поле можно будет вводить только цифры от 0 до 9.
Кроме того, можно сделать запись с уже прописанным кодом страны, который будет выводится по умолчанию:
Надеюсь вам стало понятно как создается такой эффект. Существуют и другие значения для масок:
- a — Все алфавитные значения (A-Z,a-z) или (A-Я,a-я). Если не сработает, попробуйте убрать запятую.
- 9 — Все цифровые значения (0-9)
- * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)
А на сегодня — все. Всем — пока. Эксперементируйте с масками. Вы обязательно найдете им достойное применение.
Всем, кто искал альтернативу или «баг» мешает нормальному приему заявок, рекомендую почитать эту статью.
Заказчики лэндингов часто просят сделать маску ввода телефона, желая таким образом задать определённый стандарт вводимых номеров клиентами. Для реализации поставленной задачи необходимо подключить библиотеку jQuery.
Поставьте следующий код перед закрывающимся тегом body:
Плагин для jQuery, позволяющий создавать различные маски для ввода числовых и буквенных данных
jQuery Masked Input Plugin позволяет создавать произвольные маски для вводимых данных в форму, например: дата, телефон, серийный номер и т.д.
Установка:
Подключаем библиотеку jQuery и плагин jquery.maskedinput:
Далее для инпута c создаем маску:
Значения для создания маски:
a — буквы алфавита (A-Z,a-z)
* — буквы и цифры (A-Z,a-z,0-9)
Настройки:
По умолчанию если пользователь не завершил ввод данных, они сбрасываются. Для отмены убираем очистку поля:
По умолчанию на место ввода значения ставится знак подчеркивания, для его замены нужно прописать свой placeholder:
Плагин также может выполнить функцию после завершения ввода:
Пример:
- Опубликовано: 17.07.2018
- Рубрики: Формы
- Метки: jQuery
- 5813 просмотров
Смотрите также:
Стилизованная рабочая форма обратной связи
Создание формы обратной связи с валидацией, оформлением, отправкой письма и описанием
Динамически изменяющееся поле ввода текста
Простой плагин для jQuery, который изменяет размер текстового поля в зависимости от кол-ва текста.
Ползунок диапазонов jQuery UI Slider
Настройка, события, методы, вывод данных и классы ползунка диапазонов jQuery UI Slider
Добавить комментарий:
Разделы:
Проверенный хостинг:
Работаю с ним более 10 лет!
Хостинг от 119 рублей в месяц
VDS от 45 рублей в месяц
10 дней для бесплатного тестирования
Неограничено почтовых ящиков и доменов
Бесплатный SSL сертификат