Определение маски для формы

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

demosourse

Шаг 1.

Для этого нужно подключить к документу фреймворк jQuery и соответствующий плагин:

 <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>

Шаг 2.

Далее вставим код, определяющий маски нашим формам:

 <script type="text/javascript">
jQuery(function($) {
$.mask.definitions['~']='[+-]';
$('#date').mask('99/99/9999');
$('#phone').mask('(999) 999-9999');
$('#phoneext').mask("(999) 999-9999? x99999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
$("#product").mask("a*-999-a999");
$("#eyescript").mask("~9.99 ~9.99 999");
});</script>

Вы можете определить маску так, как вам угодно.

9 - обозначает любую цифру, а - любую букву латинского алфавита, * - любой знак.

Определить значение символов вы также можете сами. Для этого в плагине jquery.maskedinput-1.2.2.js нужно изменить следующие строки:

 definitions: {
'9': "[0-9]",
'a': "[A-Za-z]",
'*': "[A-Za-z0-9]"

Заменив [A-Za-z] на [A-Яa-я], получим возможность вводить кириллические символы вместо латинских.

Шаг 3.

При создании поля для ввода данных просто прописываем ему нужный идентификатор маски.

Например:

<input id="date" type="text" />

Маска для формы готова! Надеюсь, этот урок был для вас полезен!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.digitalbush.com
Перевел: Сергей Патин
Урок создан: 5 Октября 2009
Просмотров: 101628
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 5 Октября 2009 21:26
    MIKA
    Спасибо!!!! Это супер урок!!!!!! То, что нужно!
  • 5 Октября 2009 21:46
    DiMaN_VRN
    +1, большое спасибо за этот урок!!!!
  • 5 Октября 2009 21:52
    Sonic
    Очень полезный урок, когда надо строго следовать формату. А такие ситуации бывают часто
  • 5 Октября 2009 21:56
    Dimka
    Оно то канешно прикольно... но очень непривычно для юзера.. Юзер будет пытатся стирать это..
  • 5 Октября 2009 23:30
    aksoft
    Глянул правда только демо, но у меня вопрос - может ли сей плагин справиться с такой задачей, как вывод числа с пробелами между разрядами в инпуте, т.е. : -100 -1 000 -10 000 -100 000 -1 000 000 , как считаете, или может есть другой какой нить плагин для этого?
  • 5 Октября 2009 23:30
    Magnum
    Друзья ! Вот так вот по ассоциациям вспомнил, не могу решить одну проблему - как в вашем уроке "Проверка формы на лету" проверять select выбран или нет ? Не ругайтеся, то не в тему...
  • 6 Октября 2009 14:35
    Scorpius
    а ~ что означает? вставляется вроде только + и -
  • 6 Октября 2009 20:36
    neman
    Исходники не работают:(
  • 7 Октября 2009 09:11
    Сергей_Патин
    Все работает. Только что проверил.
  • 10 Октября 2009 19:21
    ILLEGALS
    Сергей_Патин нифига они не работают
  • 14 Октября 2009 00:58
    TRAHOMOTO
    Все ПРЕКРАСНО РАБОТАЕТ и во всех браузерах! Крикуны выровняйте руки! Спасибо, давно искал нечто похожее
  • 22 Января 2010 23:41
    asdfasdf
    А как сделать чтобы пользователь мог вводить разное число символов(например от 1 до 5) ?
  • 17 Июня 2010 03:27
    smokie_one
    ну, судя по всему, definitions: прописать [1-5]
  • 7 Декабря 2010 17:47
    Sahaviev
    Подскажите как плагин заставить работать с динамически загружаемыми элементами на странице. У меня пользовательский интерфейс где стоит DivEditable плагин для динамического редактирования полей формы. Само собой не ляжет плагин на это поле, так как в нем используются bind(). Пробовал перевести bind на live не сработало... Если вот это кто подскажет, то крикунов меньше останется) Максимум те кто не умеет читать) Отбой) Извиняюсь:) Плагин нормально заработал когда я его подключил в том событии где динамически выводилось поле input.
  • 13 Февраля 2012 16:14
    aleks3130
    Что означает вопросительный знак $('#phoneext').mask("(999) 999-9999? x99999"); и как сделать маску если нужно сделать неопределенное количество символов?
  • 26 Октября 2012 18:36
    koldim
    А как сделать маску для условий: только цифры без ограничения их колличества или только цифры колличеством от 7 до 9
  • 6 Мая 2014 13:46
    RedShuhard
    Я немного не силен в данной теме и у меня такой вопрос: Как добавить маску с уже предопределенным условием например
    $("#nomer_karty").mask("9999 9999 9999 9999");
    поменять на что то подобное
    $("#nomer_karty").mask("4892 9999 9999 9999");
    У меня не получается, так как в маску первая же девятка приходит как пробельный символ.
    • 7 Мая 2014 05:55
      Lashchevsky
      Откройте файл jquery.maskedinput-1.2.2.js и замените 15 строчку
      '9': "[0-9]",
      на
      'q': "[0-9]",
      и используйте следующую маску:
      $("#nomer_karty").mask("4892 qqqq qqqq qqqq");
      Правда, в таком случае, Вам лучше не использовать маску для букв. Но в этом случае всё должно работать.
  • 3 Февраля 2015 14:03
    drom1962
    Здравствуйте. А как сделать, что бы это работало в форме выводимой в модальном окне ?
  • 4 Июля 2015 16:57
    da_lamber
    Спасибо большое Евгений. Все работает. Просто супер!
  • 18 Октября 2015 22:59
    Паша Соколов
    можно ли указать не менее определенного количества символов?
  • 17 Февраля 2016 02:01
    Seyon7
    Скажите, а как преобразовать пример если на странице несколько одинаковых форм? Как вместо id (#) использовать классы?
    $('#phone').mask('(999) 999-9999');
  • 12 Ноября 2016 17:36
    olga1qazaq1
    Скачала исходники, открыла в браузере... не работает ? Ничего не правила, просто открыла исходники. Что делать, в чем может быть беда?
^ Наверх ^