Лучший плагин масок для полей на jQuery - InputMask
Раньше я уже размещал на сайте интересный плагин для создания заранее подготовленных масок для текстовых полей. К сожалению, сейчас тот плагин не совсем корректно работает на мобильных устройствах, а вот новый плагин, представленный здесь, работает просто идеально
Для начала посмотрите ДЕМО
Установка:
1. На страницах вашего сайта перед закрывающим тегом /head вставьте:
|
1 2 3 4 5 6 |
<script type="text/javascript" src="/js/jquery.inputmask.js"></script> <script type="text/javascript"> jQuery(function() { jQuery("input[inputmode]").inputmask(); }); </script> |
2. Пример использования полей:
|
1 2 3 4 5 6 |
<span>Дата 1:</span> <input data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" inputmode="numeric"><br> <span>Дата 2:</span> <input data-inputmask-alias="datetime" data-inputmask-inputformat="mm/dd/yyyy" inputmode="numeric"><br> <span>Серийник:</span> <input data-inputmask="'mask': '[9-]AAA-999'" inputmode="text"><br> <span>IP:</span> <input id="ip" data-inputmask="'alias': 'ip'" inputmode="numeric"><br> <span>EMAIL:</span> <input id="email" data-inputmask="'alias': 'email'" inputmode="email"><br> <span>ТЕЛЕФОН:</span> <input id="phone" data-inputmask="'mask': '+7-[999]-999-9999'" inputmode="numeric"><br> |
Как видите, достаточно просто добавить к текстовому полю атрибут data-inputmask с нужным параметром, чтобы потом в поле использовалась заранее подготовленная маска. Маска может быть как заранее подготовленная плагином, такая как data-inputmask="'alias': 'email'", так и произвольная, такая как data-inputmask="'mask': '+7-[999]-999-9999'"
В качестве доп параметра можете указать тип симолов, разрешённый для ввода. К примеру, inputmode="numeric" разрешает использовать только цифры, а вот inputmode="text" разрешит использовать ещё и буквы
Осталось лишь залить js файл из прикреплённого архива в папку js
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
