Бывают ситуации, когда необходимо заполнять различные формы, а точнее поля ввода, по определенному формату. Например, если в форме регистрации есть поле телефона, то пользователь его может ввести как угодно – с пробелами, тире, все слитно и т.п.
Поэтому, чтобы формат записи был одинаков, а иногда это просто необходимо, например, для дальнейшей обработке данных из БД, был придуман специальный скрипт 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”);} });
В принципе на этом основной функционал скрипта заканчивается. Надеюсь он вам пригодится!
(Пока оценок нет)
Загрузка...