README

版权 (c) 2010 - 2017 Robin Herbots。根据 MIT 许可证授权（https://open-source.org.cn/licenses/mit-license.php）

Inputmask 是一个创建输入掩码的 JavaScript 库。Inputmask 可以在 vanilla JavaScript、jQuery 和 jqlite 上运行。

输入掩码通过确保预定义的格式来帮助用户输入。这对于日期、数字、电话号码等非常有用。

亮点

• 易于使用
• 掩码中任何位置都可以有可选部分
• 可以定义别名以隐藏复杂性
• 日期/日期时间掩码
• 数字掩码
• 许多回调函数
• 非贪婪掩码
• 许多功能可以通过选项启用/禁用/配置
• 支持 readonly/disabled/dir="rtl" 属性
• 支持 data-inputmask 属性
• 交替掩码
• 正则表达式掩码
• 动态掩码
• 预处理掩码
• JIT 掩码
• 无输入元素的价值格式化/验证
• 支持 AMD/CommonJS
• 依赖库：vanilla javascript、jQuery、jqlite
• 支持 Android

演示页面请参见 http://robinherbots.github.io/Inputmask

设置

依赖库

Inputmask 可以在多种 JavaScript 库上运行。
您可以选择以下之一

• inputmask.dependencyLib (vanilla)
• inputmask.dependencyLib.jquery
• inputmask.dependencyLib.jqlite
• .... (其他也欢迎)

经典网页与 <script> 标签

包含在 dist 文件夹中可找到的 js 文件。

如果您想包含 Inputmask 和所有扩展（以 jQuery 作为依赖库）。

<script src="jquery.js"></script>
<script src="dist/jquery.inputmask.bundle.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>

对于单个扩展（以 jQuery 作为依赖库）。

<script src="jquery.js"></script>
<script src="dist/inputmask/inputmask.js"></script>
<script src="dist/inputmask/inputmask.extensions.js"></script>
<script src="dist/inputmask/inputmask.numeric.extensions.js"></script>
<script src="dist/inputmask/inputmask.date.extensions.js"></script>
<script src="dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="dist/inputmask/jquery.inputmask.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>

对于单个扩展（以 vanilla 依赖库）。

<script src="dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="dist/inputmask/inputmask.js"></script>
<script src="dist/inputmask/inputmask.extensions.js"></script>
<script src="dist/inputmask/inputmask.numeric.extensions.js"></script>
<script src="dist/inputmask/inputmask.date.extensions.js"></script>
<script src="dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>

如果您想自动将 inputmask 绑定到带有 data-inputmask- ... 属性的输入，还可以包含 inputmask.binding.js

<script src="dist/inputmask/bindings/inputmask.binding.js"></script>

webpack

安装包

npm install inputmask --save-dev

在您的模块中

如果您想包含 Inputmask 和所有扩展。

var Inputmask = require('inputmask');

//es6
import Inputmask from "inputmask";

对于单个扩展。
每个扩展都导出 Inputmask，因此您只需要导入扩展。
请参见示例。

require("inputmask/dist/inputmask/inputmask.numeric.extensions");
var Inputmask = require("inputmask/dist/inputmask/inputmask.date.extensions");

//es6
import "inputmask/dist/inputmask/inputmask.numeric.extensions";
import Inputmask from "inputmask/dist/inputmask/inputmask.date.extensions";

选择依赖库

默认情况下使用 vanilla 依赖库。您可以在 webpack.config 中创建别名以选择其他依赖库。

 resolve: {
        alias: {
            "./dependencyLibs/inputmask.dependencyLib": "./dependencyLibs/inputmask.dependencyLib.jquery"
        }
    },

用法

通过 Inputmask 类

var selector = document.getElementById("selector");

var im = new Inputmask("99-9999999");
im.mask(selector);
  
//or
  
Inputmask({"mask": "(999) 999-9999", .... other options .....}).mask(selector);
Inputmask("9-a{1,3}9{1,3}").mask(selector);
Inputmask("9", { repeat: 10 }).mask(selector);

通过 jQuery 插件

$(document).ready(function(){
  $(selector).inputmask("99-9999999");  //static mask
  $(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
  $(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
});

通过 data-inputmask 属性

<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

$(document).ready(function(){
  $(":input").inputmask();
  or
  Inputmask().mask(document.querySelectorAll("input"));
});

任何选项也可以通过使用数据属性传递。使用 data-inputmask-<选项名称>="值"

<input id="example1" data-inputmask-clearmaskonlostfocus="false" />
<input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />

$(document).ready(function(){
  $("#example1").inputmask("99-9999999");
  $("#example2").inputmask();
});

允许的 HTML 元素

• <input type="text">
• <input type="tel">
• <input type="password">
• <div contenteditable="true"> (以及所有受 contenteditable 支持的元素)
• <textarea>
• 任何 HTML 元素（掩码文本内容或使用 jQuery.val 设置掩码值）

允许的输入类型在 supportsInputType 选项中定义。另请参阅 (input-type-ref)

默认掩码定义

• 9 : 数字
• a : 字母
• * : 字母数字

在扩展中定义了更多定义。
您可以在 js 文件中找到信息，或进一步探索选项。

掩码类型

静态掩码

这些是掩码的基本形式。掩码被定义，并且在输入过程中不会改变。

$(document).ready(function(){
  $(selector).inputmask("aa-9999");  //static mask
  $(selector).inputmask({mask: "aa-9999"});  //static mask
});

可选掩码

可以在掩码中定义一些部分为可选。这是通过使用 [] 来完成的。

示例

$('#test').inputmask('(99) 9999[9]-9999');

此掩码将允许输入类似 (99) 99999-9999 或 (99) 9999-9999 的格式。

输入 => 12123451234 掩码 => (12) 12345-1234 (触发完成)
输入 => 121234-1234 掩码 => (12) 1234-1234 (触发完成)
输入 => 1212341234 掩码 => (12) 12341-234_ (触发不完整)

跳过可选部分字符

额外的是，还有一个可配置的字符，用于跳过掩码中的可选部分。

skipOptionalPartCharacter: " "

输入 => 121234 1234 掩码 => (12) 1234-1234 (触发完成)

当在选项中设置 clearMaskOnLostFocus: true（默认值）时，如果可选部分没有填写，掩码将清除该部分，并且仅在可选部分位于掩码末尾时这样做。

例如：

$('#test').inputmask('999[-AAA]');

当字段具有焦点且为空时，用户将看到完整的掩码 ___-___。当掩码的必需部分填写并字段失去焦点时，用户将看到 123。当掩码的必需和可选部分都填写且字段失去焦点时，用户将看到 123-ABC。

具有 greedy 为 false 的可选掩码

当与 greedy: false 选项一起定义可选掩码时，输入掩码将首先显示最小的可能掩码。

$(selector).inputmask({ mask: "9[-9999]", greedy: false });

初始显示的掩码将是 "_" 而不是 "_-____"。

动态掩码

动态掩码可以在输入过程中更改。要定义动态部分，请使用 { }。

{n} => n 重复
{n,m} => 从 n 到 m 重复

此外，还允许使用 {+} 和 {*}。+ 从 1 开始，* 从 0 开始。

$(document).ready(function(){
  $(selector).inputmask("aa-9{4}");  //static mask with dynamic syntax
  $(selector).inputmask("aa-9{1,4}");  //dynamic mask ~ the 9 def can be occur 1 to 4 times

  //email mask
  $(selector).inputmask({
    mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
    greedy: false,
    onBeforePaste: function (pastedValue, opts) {
      pastedValue = pastedValue.toLowerCase();
      return pastedValue.replace("mailto:", "");
    },
    definitions: {
      '*': {
        validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
        cardinality: 1,
        casing: "lower"
      }
    }
  });
});

交替掩码

交替语法类似于一个 OR 语句。掩码可以是交替中指定的 3 个选择之一。

要定义交替，请使用 |。
例如： "a|9" => a 或 9
"(aaa)|(999)" => aaa 或 999
"(aaa|999|9AA)" => aaa 或 999 或 9AA

请确保阅读有关 keepStatic 选项的说明。

$("selector").inputmask("(99.9)|(X)", {
  definitions: {
    "X": {
      validator: "[xX]",
      cardinality: 1,
      casing: "upper"
    }
  }
});

或

$("selector").inputmask({
  mask: ["99.9", "X"],
  definitions: {
    "X": {
      validator: "[xX]",
      cardinality: 1,
      casing: "upper"
    }
  }
});

预处理掩码

您可以将掩码定义为函数，允许预处理结果掩码。例如，对多个掩码进行排序或通过 AJAX 动态检索掩码定义。预处理函数应返回一个有效的掩码定义。

$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }});

JIT 掩码

即时掩码。使用 jitMasking 选项，您可以启用 JIT 掩码。掩码仅在用户输入的字符可见。默认：false

值可以是 true 或一个阈值数字或 false。

Inputmask("date", { jitMasking: true }).mask(selector);

定义自定义定义

您可以为您的掩码定义自己的定义。
首先选择一个掩码符号。

validator(chrs, maskset, pos, strict, opts)

接下来定义您的验证器。验证器可以是正则表达式或函数。

验证器的返回值可以是 true、false 或命令对象。

命令对象的选项

• pos : 插入位置

• c : 要插入的字符

• caret : 光标位置

• remove : 要删除的位置

  • pos 或 [pos1, pos2]

• insert : 要添加的位置

  • { pos : 插入位置, c : 要插入的字符 }
  • [{ pos : 插入位置, c : 要插入的字符 }, { ...}, ... ]

• refreshFromBuffer

  • true => 从完整缓冲区刷新 validPositions
  • { start: , end: } => 从开始到结束刷新

cardinality

基数指定定义表示和验证的字符数。

prevalidator(chrs, maskset, pos, strict, opts)

prevalidator 选项用于在定义基数达到之前验证字符。（参见 'j' 示例）

definitionSymbol

当插入或删除字符时，只有在定义类型相同时，它们才会移动。可以通过提供定义符号来覆盖此行为。（参见示例 x、y、z，这些可以用于 IP 地址掩码，验证不同，但允许在定义之间移动字符）

Inputmask.extendDefinitions({
  'f': {  //masksymbol
    "validator": "[0-9\(\)\.\+/ ]",
    "cardinality": 1,
    'prevalidator': null
  },
  'g': {
    "validator": function (chrs, buffer, pos, strict, opts) {
      //do some logic and return true, false, or { "pos": new position, "c": character to place }
    }
    "cardinality": 1,
    'prevalidator': null
  },
  'j': { //basic year
    validator: "(19|20)\\d{2}",
    cardinality: 4,
    prevalidator: [
      { validator: "[12]", cardinality: 1 },
      { validator: "(19|20)", cardinality: 2 },
      { validator: "(19|20)\\d", cardinality: 3 }
    ]
  },
  'x': {
    validator: "[0-2]",
    cardinality: 1,
    definitionSymbol: "i" //this allows shifting values from other definitions, with the same masksymbol or definitionSymbol
  },
  'y': {
    validator: function (chrs, buffer, pos, strict, opts) {
      var valExp2 = new RegExp("2[0-5]|[01][0-9]");
      return valExp2.test(buffer[pos - 1] + chrs);
    },
    cardinality: 1,
    definitionSymbol: "i"
  },
  'z': {
    validator: function (chrs, buffer, pos, strict, opts) {
      var valExp3 = new RegExp("25[0-5]|2[0-4][0-9]|[01][0-9][0-9]");
      return valExp3.test(buffer[pos - 2] + buffer[pos - 1] + chrs);
    },
    cardinality: 1,
    definitionSymbol: "i"
  }
});

占位符

指定一个用于定义的占位符。这也可以是一个函数。

设置默认值

默认值可以设置如下。

Inputmask.extendDefaults({
  'autoUnmask': true
});
Inputmask.extendDefinitions({
  'A': {
    validator: "[A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]",
    cardinality: 1,
    casing: "upper" //auto uppercasing
  },
  '+': {
    validator: "[0-9A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]",
    cardinality: 1,
    casing: "upper"
  }
});
Inputmask.extendAliases({
  'numeric': {
    mask: "r",
    greedy: false,
    ...
  }
});

但是，如果在别名内部定义了属性，您需要为别名定义设置它。

Inputmask.extendAliases({
  'numeric': {
    allowPlus: false,
    allowMinus: false
  }
});

然而，修改别名属性的推荐方法是创建一个新的别名，该别名从默认别名定义中继承。

Inputmask.extendAliases({
  'myNum': {
    alias: "numeric",
    placeholder: '',
    allowPlus: false,
    allowMinus: false
  }
});

一旦定义，您可以通过以下方式调用别名：

$(selector).inputmask("myNum");

所有回调都实现为选项。这意味着您可以通过设置默认值来设置回调的通用实现。

Inputmask.extendDefaults({
  onKeyValidation: function(key, result){
    if (!result){
      alert('Your input is not valid')
    }
  }
});

方法

mask(elems)

为输入创建一个掩码。

$(selector).inputmask({ mask: "99-999-99"});

或

Inputmask({ mask: "99-999-99"}).mask(document.querySelectorAll(selector));

或

Inputmask("99-999-99").mask(document.querySelectorAll(selector));

或

var im = new Inputmask("99-999-99");
im.mask(document.querySelectorAll(selector));

或

Inputmask("99-999-99").mask(selector);

unmaskedvalue

获取 unmaskedvalue

$(selector).inputmask('unmaskedvalue');

或

var input = document.getElementById(selector);
if (input.inputmask)
  input.inputmask.unmaskedvalue()

值解掩码

解掩码给定值与掩码。

var unformattedDate = Inputmask.unmask("23/03/1973", { alias: "dd/mm/yyyy"}); //23031973

remove

移除 inputmask。

$(selector).inputmask('remove');

或

var input = document.getElementById(selector);
if (input.inputmask)
  input.inputmask.remove()

或

Inputmask.remove(document.getElementById(selector));

getemptymask

返回默认（空）掩码值

$(document).ready(function(){
  $("#test").inputmask("999-AAA");
  var initialValue = $("#test").inputmask("getemptymask");  // initialValue  => "___-___"
});

hasMaskedValue

检查返回的值是否已掩码；目前仅在使用 jQuery.val fn 获取值时可靠

$(document).ready(function(){
  function validateMaskedValue(val){}
  function validateValue(val){}

  var val = $("#test").val();
  if ($("#test").inputmask("hasMaskedValue"))
    validateMaskedValue(val);
  else
    validateValue(val);
});

isComplete

验证当前值是否完整。

$(document).ready(function(){
  if ($(selector).inputmask("isComplete")){
    //do something
  }
});

getmetadata

通过调用 getmetadata 可以获取在掩码定义中提供的实际掩码的元数据。如果只提供了一个掩码，getmetadata 将返回掩码定义。

$(selector).inputmask("getmetadata");

setvalue

setvalue 功能是将值设置到 inputmask 中，就像使用 jQuery.val 一样，但它将始终触发 inputmask 使用的内部事件，无论情况如何。这在使用 jQuery.clone 克隆 inputmask 时特别有用。克隆 inputmask 不是一个完全功能的克隆。在第一个事件（mouseenter、focus 等）中，inputmask 可以检测它是否被克隆，并可以重新激活掩码。然而，当使用 jQuery.val 设置值时，没有触发该事件。setvalue 功能为您做到这一点。

option(options, noremask)

获取或设置现有 inputmask 上的选项。option 方法旨在稍后添加额外的选项，如回调等。

设置额外选项时，掩码将自动重新应用，除非您为 noremask 参数传递 true。

设置选项

document.querySelector("#CellPhone").inputmask.option({
  onBeforePaste: function (pastedValue, opts) {
    return phoneNumOnPaste(pastedValue, opts);
  }
});

$("#CellPhone").inputmask("option", {
  onBeforePaste: function (pastedValue, opts) {
    return phoneNumOnPaste(pastedValue, opts);
  }
})

format

除了为输入元素创建掩码外，还可以使用 inputmask 格式化给定值。考虑将值格式化以显示在 jqGrid 或其他元素上，而不是输入。

var formattedDate = Inputmask.format("2331973", { alias: "dd/mm/yyyy"});

isValid

验证给定值是否与掩码匹配。

var isValid = Inputmask.isValid("23/03/1973", { alias: "dd/mm/yyyy"});

选项

占位符

更改掩码占位符。默认："_"

您可以通过添加 placeholder 选项来更改未填充字符掩码，就像您想的那样。
例如，placeholder: " " 将更改默认的自定义填充空值

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "placeholder": "*" });
});

或多个字符的占位符

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "placeholder": "dd/mm/yyyy" });
});

optionalmarker

定义用于指示掩码中可选部分的符号。

optionalmarker: { start: "[", end: "]" }

quantifiermarker

定义用于指示掩码中量词的符号。

quantifiermarker: { start: "{", end: "}" }

groupmarker

定义用于指示掩码中组的符号。

groupmarker: { start: "(", end: ")" }

alternatormarker

定义用于指示掩码中交替部分的符号。

alternatormarker: "|"

escapeChar

定义用于转义掩码中部分的符号。

escapeChar: "\\"

请参阅 转义特殊掩码字符

mask

要使用的掩码。

oncomplete

当掩码完成时执行函数。

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "oncomplete": function(){ alert('inputmask complete'); } });
});

onincomplete

当掩码不完整时执行函数。在失去焦点时执行。

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "onincomplete": function(){ alert('inputmask incomplete'); } });
});

oncleared

当掩码被清除时执行函数。

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "oncleared": function(){ alert('inputmask cleared'); } });
});

repeat

掩码重复函数。重复掩码定义 x 次。

$(document).ready(function(){
  $("#number").inputmask({ "mask": "9", "repeat": 10 });  // ~ mask "9999999999"
});

greedy

切换为分配尽可能多的或相反。非贪婪重复函数。

$(document).ready(function(){
  $("#number").inputmask({ "mask": "9", "repeat": 10, "greedy": false });  // ~ mask "9" or mask "99" or ... mask "9999999999"
});

将非贪婪选项设置为 false 时，您可以使用 * 作为重复。这使得重复无限。

autoUnmask

在检索值时自动解掩码。
默认：false。

将此选项设置为 true 时，插件还期望服务器初始值未掩码。

removeMaskOnSubmit

在提交表单前移除遮罩。
默认：false

clearMaskOnLostFocus

在失去焦点时移除空遮罩或当不为空时移除可选的尾部部分。默认：true

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999",{placeholder:" ", clearMaskOnLostFocus: true }); //default
});

insertMode

切换到插入或覆盖输入。
默认：true。
此选项可以通过按Insert键进行更改。

clearIncomplete

在失去焦点时清除不完整的输入。

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "clearIncomplete": true });
});

aliases

别名的定义。

通过别名，您可以定义复杂的遮罩定义并使用别名名称调用它。因此，这主要是为了简化您对遮罩的使用。在扩展中找到的一些别名包括：电子邮件、货币、十进制、整数、日期、日期时间、dd/mm/yyyy等。

首先，您必须创建一个别名定义。别名定义可以包含遮罩的选项、自定义定义、要使用的遮罩等。

当传递别名时，首先解析别名，然后应用其他选项。因此，您可以调用别名并传递另一个要应用于别名的遮罩。这也意味着您可以编写“继承”自另一个别名的别名。

一些示例可以在jquery.inputmask.xxx.extensions.js中找到。

use

$("#date").inputmask("date");

或

$("#date").inputmask({ alias: "date"});

您还可以调用别名并使用更多选项扩展它。

$("#date").inputmask("date", { "clearIncomplete": true });

或

$("#date").inputmask({ alias: "date", "clearIncomplete": true });

alias

要使用的别名。

$("#date").inputmask({ alias: "email"});

onKeyDown

回调函数用于在特定键上实现自动完成，例如。

函数参数：事件、缓冲区、光标位置、选项
函数返回

onBeforeMask

在遮罩初始值之前执行，允许预处理初始值。

函数参数：初始值、选项
函数返回：处理后的值

$(selector).inputmask({
  alias: 'phonebe',
  onBeforeMask: function (value, opts) {
    var processedValue = value.replace(/^0/g, "");
    if (processedValue.indexOf("32") > 1 ||     processedValue.indexOf("32") == -1) {
      processedValue = "32" + processedValue;
    }

    return processedValue;
  }
});

onBeforePaste

此回调允许在实际上处理遮罩值之前预处理粘贴的值。这在删除一些字符后再进行处理时非常有用。

函数参数：粘贴的值、选项
函数返回：处理后的值

$(selector).inputmask({
  mask: '9999 9999 9999 9999',
  placeholder: ' ',
  showMaskOnHover: false,
  showMaskOnFocus: false,
  onBeforePaste: function (pastedValue, opts) {
    var processedValue = pastedValue;

    //do something with it

    return processedValue;
  }
});

您还可以在onBeforePaste调用中返回false以禁用粘贴值。

默认：调用onBeforeMask

onBeforeWrite

在写入遮罩元素之前执行。

用于在实现别名时进行额外的输入处理。这在实现十进制别名、在离开输入字段时自动填充数字时非常有用。

函数参数：事件、缓冲区、光标位置、选项
函数返回：命令对象（请参阅定义自定义定义）

onUnMask

在取消遮罩后执行，允许对取消遮罩的值进行后处理。

函数参数：遮罩值、取消遮罩的值
函数返回：处理后的值

$(document).ready(function(){
  $("#number").inputmask("decimal", { onUnMask: function(maskedValue, unmaskedValue) {
    //do something with the value
    return unmaskedValue;
  }});
});

showMaskOnFocus

当输入获得焦点时显示遮罩。（默认 = true）

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999",{ showMaskOnFocus: true }); //default
});

为确保在焦点时不可见遮罩，也将showMaskOnHover设置为false。否则，鼠标悬停将设置遮罩并保持在焦点上。

showMaskOnHover

当鼠标悬停时显示遮罩。（默认 = true）

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999",{ showMaskOnHover: true }); //default
});

onKeyValidation

在每次键验证时执行回调函数，并将键和结果作为参数。

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999", {
    onKeyValidation: function (key, result) {
      console.log(key + " - " + result);
    }
  });
});

跳过可选部分字符

numericInput

数字输入方向。保持光标在末尾。

$(document).ready(function(){
  $(selector).inputmask('€ 999.999.999,99', { numericInput: true });    //123456  =>  € ___.__1.234,56
});

rightAlign

将输入对齐到右侧

通过设置rightAlign，您可以指定将输入遮罩右对齐。这仅在组合numericInput选项或dir属性时应用。默认为true。

$(document).ready(function(){
  $(selector).inputmask('decimal', { rightAlign: false });  //disables the right alignment of the decimal input
});

undoOnEscape

使escape的行为类似于撤销（ctrl-Z）。
按Esc键将值还原到焦点前的值。
默认：true

radixPoint (numerics)

定义基数点（小数分隔符）。
默认：""

groupSeparator (numerics)

定义分组分隔符
默认：""

keepStatic

默认：null (~false) 与交替语法组合使用。尝试在键入时保持遮罩静态。如果可能，将推迟更改遮罩的决定。

例如：$(selector).inputmask({ mask: ["+55-99-9999-9999", "+55-99-99999-9999", ], keepStatic: true });

输入1212345123 => 应该转换为+55-12-1234-5123 输入额外的4 => 切换到+55-12-12345-1234

当传递多个掩码（掩码数组）时，除非通过选项显式设置，否则自动将keepStatic设置为true。

positionCaretOnTab

当启用时，光标位置设置为TAB键后的最新有效位置。默认：true

tabThrough

允许在掩码字段的各个部分之间进行Tab键切换。
默认：false

definitions

ignorables

isComplete

使用此调用（钩子）可以覆盖isComplete函数的默认实现。
参数 => buffer, opts 返回 => true|false

$(selector).inputmask({
  regex: "[0-9]*",
  isComplete: function(buffer, opts) {
    return new RegExp(opts.regex).test(buffer.join(''));
  }
});

canClearPosition

修改stripValidPositions中清除行为的钩子
参数 => maskset, position, lastValidPosition, opts
返回 => true|false

postValidation

在isValid之后进行验证的钩子。用于验证整个输入。参数 => buffer, currentResult, opts
返回 => true|false|命令对象

preValidation

用于预验证输入的钩子。无论定义如何，都很有用。参数 => buffer, pos, char, isSelection, opts => return true/false/command object 当返回true时，将启动正常验证，否则将跳过。

staticDefinitionSymbol

staticDefinitionSymbol选项用于指示掩码中的静态条目可以匹配某个定义。特别适用于交替符，使掩码中的静态元素可以匹配另一个交替。

在下面的示例中，我们将空格标记为可以匹配“i”定义的可能匹配项。通过这样做，即使我们已输入“12 3”，掩码也可以切换到第二个掩码。

Inputmask("(99 99 999999)|(i{+})", {
  definitions: {
    "i": {
      validator: ".",
      cardinality: 1,
      definitionSymbol: "*"
    }
  },
  staticDefinitionSymbol: "*"
}).mask(selector);

nullable

当用户没有输入任何内容时返回空值。默认：true

noValuePatching

禁用值属性修补
默认：false

positionCaretOnClick

点击时的光标定位。选项：none, lvp（基于最后有效位置（默认），radixFocus（在初始点击时将光标定位到基数点）默认：“lvp”

casing

在掩码级别应用大小写。选项：null, "upper", "lower" 或 "title"
或回调参数 => elem, test, pos, validPositions 返回 charValue

casing: function(elem, test, pos, validPositions) {
	do some processing || upper/lower input property in the validPositions
	return elem; //upper/lower element
}

默认：null

inputmode

默认：“verbatim”指定输入模式 - 已在浏览器开始支持它们时放置https://html.whatwg.cn/#input-modalities:-the-inputmode-attribute

colorMask

默认：false 创建可CSS样式的掩码。使用CSS类：im-caret, im-static。

要完全使用此选项，您需要将inputmask.css包含在您的页面上。

通用

设置值并应用掩码

这可以通过传统的jQuery.val函数（所有浏览器）或实现lookupGetter或getOwnPropertyDescriptor的浏览器的JavaScript值属性来完成

$(document).ready(function(){
  $("#number").val(12345);

  var number = document.getElementById("number");
  number.value = 12345;
});

使用autoUnmask选项，您可以更改$.fn.val（或值属性）的返回值为unmaskedvalue或maskedvalue

$(document).ready(function(){
  $('#<%= tbDate.ClientID%>').inputmask({ "mask": "99/99/9999", 'autoUnmask' : true});    //  value: 23/03/1973
  alert($('#<%= tbDate.ClientID%>').val());    // shows 23031973     (autoUnmask: true)

  var tbDate = document.getElementById("<%= tbDate.ClientID%>");
  alert(tbDate.value);    // shows 23031973     (autoUnmask: true)
});

转义特殊掩码字符

如果您想使掩码元素看起来像一个静态元素，可以通过\转义它们

$(document).ready(function(){
  $("#months").inputmask("m \\months");
});

自动大小写输入掩码

您可以在定义中定义，在输入中自动应用某些大小写，通过提供casing。
大小写可以是null，"upper"，"lower"或"title"。

Inputmask.extendDefinitions({
  'A': {
    validator: "[A-Za-z]",
    cardinality: 1,
    casing: "upper" //auto uppercasing
  },
  '+': {
    validator: "[A-Za-z\u0410-\u044F\u0401\u04510-9]",
    cardinality: 1,
    casing: "upper"
  }
});

包含jquery.inputmask.extensions.js以使用A和#定义。

$(document).ready(function(){
  $("#test").inputmask("999-AAA");    //   => 123abc ===> 123-ABC
});

支持的标记选项

RTL属性

<input id="test" dir="rtl" />

readonly属性

<input id="test" readonly="readonly" />

disabled属性

<input id="test" disabled="disabled" />

maxlength属性

<input id="test" maxlength="4" />

data-inputmask属性

您还可以使用data-inputmask属性应用输入掩码。在属性中，您指定想要的输入掩码选项。它将通过$.parseJSON（目前）进行解析，因此请确保使用没有{}的格式良好的JSON字符串。

<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />

$(document).ready(function(){
  $(":input").inputmask();
});

data-inputmask-属性

所有选项也可以通过data-attributes传递。

<input data-inputmask-mask="9" data-inputmask-repeat="10" data-inputmask-greedy="false" />

$(document).ready(function(){
  $(":input").inputmask();
});

jQuery.clone

当克隆一个输入掩码时，输入掩码会在输入元素上发生的第一个事件（如mouseenter、focus等）重新激活。如果您想在克隆的输入掩码上设置值并直接重新激活掩码，您需要使用 $(input).inputmask("setvalue", value)

jQuery.inputmask 扩展

日期和日期时间扩展

数字扩展

电话扩展

其他扩展