jQuery Mask 插件

jQuery Mask 插件是一个可用于输入文本控件的jQuery插件，能够对输入数据进行格式化，可以按照特定模式限制用户输入的内容。本攻略将从安装使用、基本语法和示例说明等方面详细讲解。

安装使用

你可以使用以下命令行进行安装：

npm install jquery-mask-plugin

或者在 HTML 文档中加入如下的 CDN 引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

基本语法

在使用此插件前，需要先通过 jQuery 对目标元素进行选择，然后调用 mask 函数即可。示例代码如下所示：

$(selector).mask(mask, [options]);

其中：

• selector 表示需要进行操作的元素选择器。
• mask 表示字符串格式的模板，插件会根据模板自动填写输入内容。

示例说明

下面是一个示例，将一个输入框限制只输入纯数字：

<input type="text" id="phone" />

<script>
  $(document).ready(function() {
    $('#phone').mask('000-000-0000');
  });
</script>

在上面的示例中，我们先编写一个文本输入框，然后通过 jQuery 对其进行选择，使用函数 mask('000-000-0000') 就可以对输入框进行限制，使其只能输入数字。

接下来我们看一个应用较广泛的邮箱输入格式化的示例：

<input type="text" id="email" />

<script>
  $(document).ready(function() {
    $('#email').mask("A{1,}@A{1,}\.A{1,}", {
      translation: {
        A: { pattern: /[\w@\-.+]/, recursive: true }
      }
    });
  });
</script>

在上面的示例中，我们定义了一个输入框，使用了translation属性来将各个字符按照不同的要求限制，最终达到对邮箱输入进行了格式化的效果，让用户在输入邮箱时更加方便。

完整的 jQuery Mask 插件语法和示例代码，你可以看下面的参考文档。

参考文献

• jQuery Mask Plugin