Маска ввода телефона и других полей для input-ов в jQuery

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

Поэтому, чтобы формат записи был одинаков, а иногда это просто необходимо, например, для дальнейшей обработке данных из БД, был придуман специальный скрипт jquery.maskedinput.js. Он то и позволяет упорядочить и привести к единому формату ввода все данные, которые вы собираете через input-ы со своих пользователей.

Настройки и установка скрипта

Чтобы маска ввода заработала подключите библиотку jQuery, а после нее скрипт jquery.maskedinput.js. Скрипт принимает два значения: саму форму ввода и дополнительные параметры, например указывающие, что будет если мы верно заполним форму.

Примеры создания форматов:

<script>
$("#date").mask("99.99.9999"); //дата рождения
$("#phone").mask("(7999)-999-99-99"); //номер телефона
$("#art").mask("goods-99990"); //index
</script>

Здесь #date, #phone и #art селекторы соответствующих полей, а то, что в скобках и является маской ввода. Более подробно о синтаксисе скрипта:

a - буквенный символ из диапазона (A-Z,a-z)
9 - числовой символ (0-9)
* - символ (A-Z,a-z,0-9) <br>
Все остальные символы трактуются как литералы.

Пример с дополнительными параметрами (Когда номер телефона будет введен верно, поле ввода стане зеленым):

$("#phone").mask("(7999)-999-99-99",{completed : function(){$('#phone').css("border","1px solid green");}  });   

В принципе на этом основной функционал скрипта заканчивается. Надеюсь он вам пригодится!

 

Маска ввода телефона и других полей для input-ов в jQuery: 1 комментарий

  1. Сочетание обязательных (L) и необязательных (?) букв и обязательных цифр (0). Знак "больше" требует вводить все буквы в верхнем регистре. Чтобы использовать маску ввода этого типа, необходимо задать для типа данных поля таблицы значение .

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

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


Введите капчу: