jquery.mask.js - Javascript

jquery.mask.js是一个基于jQuery的用于输入掩码的轻量级插件。

使用方法

1.在HTML文件中引入jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2.在HTML文件中引入jquery.mask.js

<script src="path/to/jquery.mask.js"></script>

3.使用input框来创建掩码

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

4.使用掩码插件

$('#date').mask('00/00/0000');

用法

掩码是一种格式化输入的方式，它为用户提供了输入特定格式数据的方法，如电话号码、电子邮件等等。

掩码插件可以用于以下类型：

• 日期格式化 (demo: 99/99/9999)
• 时间格式化 (demo: 99:99)
• 电话格式化 (demo: (999) 999-9999)
• 卡号格式化 (demo: 9999-9999-9999-9999)
• 任何自定义格式的数据

插件API

方法

mask(maskString [, options])

使用一个特定的掩码字符串和一些可选的选项来创建一个输入框的掩码。例如：

$('input#date').mask('99/99/9999');

unmask()

移除输入框的掩码。例如：

$('input#date').unmask();

选项

translation

您可以传递一个translation对象来更改掩码值的字符。例如：

$('#date').mask('99/99/9999', {translation: {'9': {pattern: /[0-9]/}}});

此选项的默认值：

{  
  '0': {pattern: /\d/},
  '9': {pattern: /\d/, optional: true},
  '#': {pattern: /\d/, recursive: true},
  'A': {pattern: /[a-zA-Z0-9]/},
  'S': {pattern: /[a-zA-Z]/}
}

placeholder

用于掩码字符串中的非数字字符的值。例如：

$('#phone').mask('(000) 000-0000', {placeholder: " "});

completed

一个函数，它在所有必填字符都输入后调用。例如：

$('input#date').mask('99/99/9999', {
     completed: function(){
         alert('completed!');
     }
});

权利许可证

jquery.mask.js是依据MIT许可证发行的。它的完整文本可以在此处找到：https://opensource.org/licenses/MIT。