Javascript 定义输入掩码的集中方式/系统_Javascript_Jquery_Masking

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

javascript jquery

Javascript 定义输入掩码的集中方式/系统,javascript,jquery,masking,Javascript,Jquery,Masking,我们目前使用以下逻辑屏蔽输入：将特定类设置为多个输入在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('inp

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

将特定类设置为多个输入

在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全局？键/值数组？）：

var=1='5.2'//5个整数和2个小数

var=2='5.3'//5个整数和3个小数

var=3′//3个整数

开发人员将格式设置为data atribute或css类（推荐选项？）

在document.ready（）上，泛型函数解析格式定义和输入，以便根据其指定的格式屏蔽它们

PS：我们看到了这个插件，它看起来很有趣，以涵盖部分掩码逻辑（您的意见？）：

我们目前使用HTML5进行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>


$（文档）.ready（函数（）
{
$（'input[type=text]'）。每个（函数（）
{
变量类型=$（this）.data（'validation-type'）；
如果（类型=‘荷兰邮政编码’）
{
$（this.attr（'pattern'，'A-Za-z]{4}[0-9]{2}'）；
//
//使用jquery掩码插件：
// https://plugins.jquery.com/mask/
//
$（此）.mask（'0000SS'）；
}
}
);
});

您可以使用向后兼容性。

如评论中所述，如果您使用bootstrap（），则有一个优秀的Jazny bootstrap（）插件，它使输入掩码非常容易和整洁

这是一把小提琴，展示了你的3种格式：

以下是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="#">

Knockout有一个

attr

绑定，可以将可观察属性的值绑定到您选择的自定义HTML属性。详情如下：

HTML会稍微更改以绑定

数据掩码

属性，而不是直接设置它：

<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=" ">

formatmoney1
格式货币2
形成期

这样做的好处是，您可以动态更新可观察的掩码，HTML将自动更新，而无需刷新页面，因此您可以使用单选按钮控件来选择不同的输入掩码类型。

我强烈建议您查看此插件-

这个插件很健壮，有很多回调/选项，并且正在积极开发中。这个插件的一个主要优点是扩展，您可以在扩展中定义掩码和别名

你可以随意定义掩码。如果你想扩展开箱即用的

decimal

掩码定义，你可以这样做

$.extend($.inputmask.defaults.aliases, 
{
  'formatmoney1': 
  {
            mask: "99999.99",
            placeholder: "_____.__",
            alias: "decimal"
  },
  'formatmoney2': 
  {
            mask: "99999.999",
            placeholder: "_____.___",
            alias: "decimal"
  }
}

一旦定义了掩码，并扩展了开箱即用的

decimal

定义，就可以选择所有元素并应用inputmask

$(document).ready(function()
{
  $('.formatmoney1').inputmask('formatmoney1');
  $('.formatmoney2').inputmask('formatmoney2');
});

此掩码允许您通过大量回调进行大量控制，并通过设置默认选项进行高度配置

使用此插件的另一个选项是利用

数据输入掩码

属性。比如说,

<input type="text" data-inputmask="'alias':'formatmoney1'" />

请确保您查看了使用情况页面和扩展文件，其中有一些文件，但看起来您需要使用

jquery.inputmask.numeric.extensions.js

系统要求是什么？例如，你能使用HTML5吗？如果你使用Bootstrap，优秀的Jasny Bootstrap插件有一个可配置的输入掩码，可以满足你的需要。如果需要，可以使用KnockoutJS之类的工具将HTML属性动态绑定到Javascript中易于访问的变量land@PatrickHofman是的，我们目前使用HTML5、JQuery 2.0.3、JQueryUI 1.10.3、Twitter Bootstrap 3.0.3、ASP.NET和Framework 4。5@AdamMarshall有趣的是，你的提示可以完成第三点，你能用一个符合我们在问题中概述的3点的示例代码添加一个答案吗？想象一下stackoverflow声誉的价值是很有趣的。这里OP要求一个系统的原型，这是他们通常需要雇佣一个自由职业者来完成的。发布解决方案需要多少分钟？该用户通常每小时收费多少美元？50信誉值50美元或0.50美元，因为使用标准是好的，但最好是掩码解决方案（因此用户甚至不能输入错误的值）。不过，jquery示例提供了一个很好的提示，如果您可以更改代码，使其使用一些掩码jquery插件（或自定义javascript掩码函数）+一个javascript数组变量，用于保存maskname/maskpattern值并在中应用它们。每个函数我都会授予您赏金，因为我可以，但新的HTML5工作方式也会这样做。我会帮你看一看。我尝试了一些带有新html5“模式”atribute的网站，它允许我输入不正确的字符并超出字段大小…它只是在聚焦到字段外或单击提交按钮时概述了错误…示例网站：@ase69s:我发布了一个完整的工作示例。你能确认这是你的愿望吗？

<input type="text" data-inputmask="'alias':'formatmoney1'" />