jQuery 数字和小数输入掩码

在本文中，我们将介绍如何使用jQuery添加数字和小数输入掩码。输入掩码是一种限制用户在输入表单时的输入内容的技术。使用输入掩码可以确保用户只能输入数字或小数，并按照指定的格式进行输入。

阅读更多：jQuery 教程

什么是输入掩码？

输入掩码是一种用于限制表单输入的技术。它可以帮助我们指定用户可以输入的字符类型和格式，从而提高输入的准确性。

对于数字和小数输入，我们可以使用输入掩码来确保用户只能输入数字或小数，而不能输入其他字符。

jQuery Inputmask插件

jQuery Inputmask插件是一个流行的jQuery插件，可以轻松地为输入框添加输入掩码。它提供了许多选项和功能，以满足不同的输入需求。

首先，我们需要在页面中引入jQuery和Inputmask插件的JavaScript文件。然后，在需要应用输入掩码的输入框上调用Inputmask()函数，并传入相应的选项。

下面是一个例子，演示如何为一个只允许输入整数的输入框添加输入掩码：

<input type="text" id="integer-input" />

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.6/jquery.inputmask.min.js"></script>

<script>
   $(document).ready(function() {$ ('#integer-input').inputmask({
      mask: '9{1,}',
      greedy: false,
      definitions: {
        '9': {
          validator: '[0-9]',
        }
      }
    });
  });
</script>

在上面的例子中，我们为具有id为”integer-input”的输入框添加了输入掩码。mask选项指定了输入掩码的格式，这里我们使用9{1,}表示至少输入一个数字。greedy选项表示输入时是否尽可能多地接受字符，这里设置为false表示不接受多余的字符。definitions选项定义了每个掩码字符的验证器，这里使用[0-9]表示只允许输入数字。

常用的输入掩码模式

除了上面的例子，Inputmask插件还支持许多其他的输入掩码模式，以满足不同的需求。下面是一些常用的输入掩码模式：

9：只允许输入数字；
9{1,}：至少输入一个数字；
9{1,3}：输入1到3个数字；
999：输入恰好三个数字；
9999：输入恰好四个数字；
99-99：输入两个数字，并以”-“分隔；
99/99/9999：输入一个日期；
99:99：输入一个时间；
99:99 99/99/9999：输入一个日期和时间。

你还可以组合使用不同的掩码字符，以创建更复杂的输入掩码。

自定义输入掩码

如果上述的输入掩码模式无法满足你的需求，你可以使用Inputmask插件的regex选项来定义自己的输入掩码规则。正则表达式允许你更精确地控制输入的内容。

下面是一个例子，演示如何使用正则表达式来定义一个自定义的输入掩码规则：

<input type="text" id="custom-input" />

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.6/jquery.inputmask.min.js"></script>

<script>
   $(document).ready(function() {$ ('#custom-input').inputmask({
      regex: '^\\d{3}-\\d{2}-\\d{4}$'
    });
  });
</script>

在上面的例子中，我们为具有id为”custom-input”的输入框定义了一个自定义的输入掩码规则。regex选项接受一个正则表达式，这里我们使用^\d{3}-\d{2}-\d{4}$来表示输入必须为”三个数字-两个数字-四个数字”的格式。