Централизованный способ / система определения входной маски

0

В настоящее время мы используем следующую логику для маскировки входов:

  1. Задайте определенный класс для нескольких входов <input type="text" class="typenumdec"/>

  2. В 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, ''));
        });
    

Но мы хотели централизовать логику и сделать ее более упорядоченной для наших разработчиков, поэтому им не нужно добавлять/изменять привязки.

Что-то вроде этого:

  1. Разработчик определяет где-то формат и его имя (javascript globals? Key/value array?):

    var formatmoney1 = '5.2'; //5 целых чисел и 2 десятичных знака

    var formatmoney2 = '5.3'; //5 целых чисел и 3 десятичных знака

    var formatdays = '3'; //3 целых числа

  2. Разработчик устанавливает формат в атрибут data или css (рекомендуемый параметр?)

    <input type="text" class="formatmoney1" data-formatx="formatmoney1"/>

  3. В document.ready() общая функция анализирует определения формата и входы для их маскировки в зависимости от назначенного им формата

PS: мы видели этот плагин, который кажется интересным, чтобы покрыть часть логики маски (ваши мнения?): Http://igorescobar.github.io/jQuery-Mask-Plugin/

  • 0
    Каковы системные требования? Можете ли вы использовать HTML5, например?
  • 0
    Если вы используете Bootstrap, превосходное дополнение Jasny Bootstrap имеет настраиваемую маску ввода, которая может соответствовать вашим потребностям. jasny.github.io/bootstrap/javascript/#inputmask . Если вы хотите, вы можете использовать что-то вроде KnockoutJS для динамического связывания атрибутов HTML с легко доступной переменной в земле Javascript.
Показать ещё 4 комментария
Теги:
masking

3 ответа

1
Лучший ответ

В настоящее время мы используем 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 для обратной совместимости.

  • 0
    Использование стандартов - это хорошо, но предпочтительнее маскирующее решение (поэтому пользователь даже не может ввести неправильное значение).
  • 0
    Пример jquery предоставляет хороший совет, хотя, может быть, если вы можете изменить свой код так, чтобы он использовал некоторый плагин маски jquery (или пользовательскую функцию маски javascript) + переменную массива javascript, которая содержит значения maskname / maskpattern и применяет их в функции .each я дам тебе награду ^^
Показать ещё 6 комментариев
0

Я бы настоятельно рекомендовал взглянуть на эту 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

0

Как упоминалось в комментариях, если вы используете 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 будет автоматически обновляться без обновления страницы, поэтому у вас может быть, например, элемент управления радиокнопкой, чтобы выбрать различные типы маски ввода.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню