Question

我们目前使用以下逻辑来屏蔽输入：

将特定类设置为多个输入<input type="text" class="typenumdec" />

在document.ready（）中，使用规则绑定propertychange事件：

$('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个整数
Developer将格式设置为data-atribute或css类（推荐选项？）

<input type="text" class="formatmoney1" data-formatx="formatmoney1" />
在document.ready（）上，泛型函数解析格式定义和输入，以便根据其指定的格式对其进行掩码

PS：我们看到这个插件似乎很有趣，以便涵盖部分掩码逻辑（你的观点？）：http://igorescobar.github.io/jQuery-Mask-Plugin/

Answer 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向后兼容。

Answer 2

正如评论中所提到的，如果你使用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集中到一个可维护的变量，可以使用KnockoutJS将其绑定到可观察的ViewModel属性。（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绑定，允许您将observable属性的值绑定到您选择的自定义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会自动更新而不刷新页面，所以你可以有例如一个单选按钮控件，用于选择不同的输入掩码类型。

Answer 3

我强烈建议您查看此插件 - 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'" />

请务必查看“使用情况”页面以及扩展程序文件，其中有一些但看起来您会想要使用jquery.inputmask.numeric.extensions.js

用于定义输入掩码的集中方式/系统

3 个答案: