Javascript. Masked Input Plugin для Jquery

Данный плагин является разширением для библиотеки jQuery. Он позволяет пользователю легко ввести данные заданного формата (даты, номера телефонов и т.д.). Плагин был протестирован под Internet Explorer 6 / 7, Firefox 1.5/2/3, Safari, Opera, и Chrome. Правила(формат) ввода определяется маской:

  • a - Представляет алфавитный символ (az, AZ)
  • 9 - Представляет цифру (0-9)
  • * - Представляет алфавитно-цифровые символы (az, AZ ,0-9)
Date 99/99/9999
Phone (999) 999-9999
Phone + Ext (999) 999-9999? x99999
Tax ID 99-9999999
SSN 999-99-9999
Product Key a*-999-a999
Eye Script ~9.99 ~9.99 999

Во-первых, необходимо подключить jQuery и Masked Input Plugin.

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

Затем определите маску для элементов, которых необходимо обеспечить правилом ввода.

jQuery(function($){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});

Если вы хотите заменить знак подчеркивания (’_') в качестве заполнителя, можно передавать необязательный аргумент placeholder.

jQuery(function($){
$("#product").mask("99/99/9999",{placeholder:" "});
});

Дополнительно можно вызвать функцию после того, как ввод по маске был завершен.

jQuery(function($){
$("#product").mask("99/99/9999",{completed:function(){
alert("You typed the following: "+this.val());
}});
});

Можно самостоятельно определять символы для маски.

jQuery(function($){
$.mask.definitions['~']='[+-]';
$("#eyescript").mask("~9.99 ~9.99 999");
});

Интересное

Отзыв о FirstVDS
При покупке хостинга у FirstVDS мне предложили скидку за годный отзыв в блоге или на форуме....
Git и Bitbucket
Git – это распределенная система контроля версий. Пожалуй, на этом теория заканчивается, так как...
Проверка сайта на вирусы
Если пользоваться привычной терминологией, то web вирусы не являются вирусами в традиционном...
Project Glass — Очки будущего от Google
Компания Google представила суперсовременные «очки дополненной реальности» или Project Glass. Впрочем,...

Комментарии

  • krock
    11.09.2011 в 21:42

    Отличный плагин. Много труда экономит

    ответить
  • Dexel
    06.02.2012 в 21:21

    Мэрси, отличный плагин.

    PS. Можно добавить в список браузеров Firefox-10.0

    ответить

Чтобы оставлять комментарии, авторизируйтесь

Войти через OpenID

рейтинг13+-
Популярные
Точки входа
Наверх