В настоящее время мы используем следующую логику для маскировки входов:
Задайте определенный класс для нескольких входов <input type="text" class="typenumdec"/>
В document.ready() привязывает событие changechange с правилами:
$('table tbody > tr > td.tiponumdec').children('input[type=text], input[type=number]')
.add('input[type=text].tiponumdec, input[type=number].tiponumdec').bind('input propertychange', function () {
$(this).val($(this).val().replace(/[^0-9,]/g, ''));
});
Но мы хотели централизовать логику и сделать ее более упорядоченной для наших разработчиков, поэтому им не нужно добавлять/изменять привязки.
Что-то вроде этого:
Разработчик определяет где-то формат и его имя (javascript globals? Key/value array?):
var formatmoney1 = '5.2'; //5 целых чисел и 2 десятичных знака
var formatmoney2 = '5.3'; //5 целых чисел и 3 десятичных знака
var formatdays = '3'; //3 целых числа
Разработчик устанавливает формат в атрибут data или css (рекомендуемый параметр?)
<input type="text" class="formatmoney1" data-formatx="formatmoney1"/>
В document.ready() общая функция анализирует определения формата и входы для их маскировки в зависимости от назначенного им формата
PS: мы видели этот плагин, который кажется интересным, чтобы покрыть часть логики маски (ваши мнения?): Http://igorescobar.github.io/jQuery-Mask-Plugin/
В настоящее время мы используем HTML 5 для 99% всех проверок. Вы можете использовать их очень понятным и понятным для разработчиков способом.
Например, этот код не позволит ввести все остальное, а затем адрес электронной почты:
<input type="email" />
Или используйте это с пользовательским регулярным выражением:
<input type="text" name="dutch_zip_code" pattern="[A-Za-z]{4}[0-9]{2}" />
Вы также можете установить шаблон в javascript/jquery следующим образом:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.mask.js"></script>
</head>
<body>
<input type="text" name="dutch_zip_code" data-validation-type="dutch_zip_code" />
<script>
$(document).ready(function()
{
$('input[type=text]').each( function()
{
var type = $(this).data('validation-type');
if (type == 'dutch_zip_code')
{
$(this).attr('pattern', '[A-Za-z]{4}[0-9]{2}');
//
// Use jquery mask plugin:
// https://plugins.jquery.com/mask/
//
$(this).mask('0000SS');
}
}
);
});
</script>
</body>
</html>
Вы можете использовать modernizr для обратной совместимости.
Я бы настоятельно рекомендовал взглянуть на эту plugin- Robin Herbots inputMask
Этот плагин прочный, имеет много обратных вызовов/опций и активно развивается. Одним из основных преимуществ этого плагина являются расширения, в которых вы определяете маски и псевдонимы.
Вы можете определить маску, но вы хотите... Если вы хотите расширить определение decimal
маски, вы можете сделать это вот так...
$.extend($.inputmask.defaults.aliases,
{
'formatmoney1':
{
mask: "99999.99",
placeholder: "_____.__",
alias: "decimal"
},
'formatmoney2':
{
mask: "99999.999",
placeholder: "_____.___",
alias: "decimal"
}
}
После того, как вы определили свою маску и расширили определение decimal
кода, вы можете выбрать все элементы и применить маску ввода.
$(document).ready(function()
{
$('.formatmoney1').inputmask('formatmoney1');
$('.formatmoney2').inputmask('formatmoney2');
});
Эта маска позволяет вам иметь очень высокий уровень контроля через многочисленные обратные вызовы и настраивается по умолчанию, задавая параметры по умолчанию.
Другой вариант, который вы используете с этим плагином, заключается в использовании атрибута data-inputmask
. Например,
<input type="text" data-inputmask="'alias':'formatmoney1'" />
Убедитесь, что вы просматриваете страницу Usage, а также файлы расширений, есть несколько из них, но похоже, что вы захотите использовать jquery.inputmask.numeric.extensions.js
Как упоминалось в комментариях, если вы используете bootstrap (http://getbootstrap.com/), есть отличный плагин Jazny Bootstrap (http://jasny.github.io/bootstrap/), который делает входные маски чрезвычайно легкими и аккуратными.
Вот скрипка, которая демонстрирует ваши 3 формата: http://jsfiddle.net/JNfxa/9/
Вот HTML:
<label>formatmoney1</label>
<input type="text" class="form-control" data-mask="99999.99" data-placeholder=" ">
<label>formatmoney2</label>
<input type="text" class="form-control" data-mask="99999.999" data-placeholder="0">
<label>formatdays</label>
<input type="text" class="form-control" data-mask="999" data-placeholder="#">
И это все, никаких дополнительных CSS или JS не требуется.
Я использовал три разных примера для атрибута data-placeholder
, это символ, который появляется для пустых цифр, которые должен выполнить пользователь, по умолчанию - "_". Где я использовал "9", это ограничит пользователя, чтобы ввести число, здесь есть другие параметры: http://jasny.github.io/bootstrap/javascript/#inputmask
Теперь, чтобы централизовать data-mask
на одну поддерживаемую переменную, вы можете привязать ее к наблюдаемому свойству ViewModel, используя KnockoutJS. (http://knockoutjs.com/index.html)
Вы можете сделать намного больше, чем это, но вот обновленная скрипка: http://jsfiddle.net/JNfxa/11/
Теперь есть несколько JS, чтобы объявить наши наблюдаемые свойства, содержащие каждую из масок:
vm = {};
vm.formatmoney1Mask = ko.observable("99999.99");
vm.formatmoney2Mask = ko.observable("99999.999");
vm.formatdaysMask = ko.observable("999");
ko.applyBindings(vm);
Knockout имеет привязку attr
, которая позволяет привязать значение свойства наблюдаемого к пользовательскому атрибуту HTML по вашему выбору. Подробнее здесь: http://knockoutjs.com/documentation/attr-binding.html
HTML немного изменит привязку атрибута data-mask
вместо его настройки:
<label>formatmoney1</label>
<input type="text" class="form-control" data-bind="attr: { 'data-mask': vm.formatmoney1Mask }" data-placeholder=" ">
<label>formatmoney2</label>
<input type="text" class="form-control" data-bind="attr: { 'data-mask': vm.formatmoney2Mask }" data-placeholder="0">
<label>formatdays</label>
<input type="text" class="form-control" data-bind="attr: { 'data-mask': vm.formatdaysMask }" data-placeholder=" ">
Что хорошего в этом, вы можете обновить маску, наблюдаемую "на лету", и HTML будет автоматически обновляться без обновления страницы, поэтому у вас может быть, например, элемент управления радиокнопкой, чтобы выбрать различные типы маски ввода.