jquery.Inputmask 插件用法（中文API文档）

853次阅读

jquery.Inputmask 可以算是input文本输入限制的神器了，内部融合了多种输入限制，如金额，电话号码，身份证号，网关等..,并且还可以自定义规则。

　 inputmask 据说最早起源于应用程序里面的插件，后面被翻译成了js，jq插件。目前inputmask的文档大多是英文，下面将部分功能翻译成中文文档。转载请注明出处谢谢

　　文档及项目源地址 https://github.com/RobinHerbots/Inputmask

一、插件引用

js引用的方法很简单，和其他插件一样，都有简单版和完整版，简单版如果用到其他插件需要手动引如相关模块，完整版则包含了所有的插件，这个地方只简单介绍完整版的引用

<script src="jquery.js"></script>
<script src="dist/jquery.inputmask.bundle.js"></script>

二.使用方法

　1.插件初始化加载

　　1)通过 Inputmask 类实例的加载方法如下:

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

var im = new Inputmask("99-9999999");
im.mask(selector);

Inputmask({"mask": "(999) 999-9999", .... 其他参数 .....}).mask(selector);
Inputmask("9-a{1,3}9{1,3}").mask(selector);
Inputmask("9", { repeat: 10 }).mask(selector);

　　2)通过 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
});

　　3)通过 data-inputmask 元素标签加载方法如下:

<inputdata-inputmask="'alias': 'date'" />
<inputdata-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<inputdata-inputmask="'mask': '99-9999999'" />
$(document).ready(function(){
  $(":input").inputmask();
  or
  Inputmask().mask(document.querySelectorAll("input"));
});

　　4)参数传递方式

　　任何参数也可以通过使用 data 属性传递。使用 data-inputmask-<参数的名称>=“value”

<inputid="example1"data-inputmask-clearmaskonlostfocus="false" />
<inputid="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("Regex");
});

如果你使用像 requireJS 这样的模块加载器

看看 inputmask.loader.js 的用法。

示例config.js

paths: {
  ...
  "inputmask.dependencyLib": "../dist/inputmask/inputmask.dependencyLib",
  "inputmask": "../dist/inputmask/inputmask",
  ...
}

2.允许使用的HTML标签元素

<input type="text">
<input type="tel">
<input type="password">
<div contenteditable="true"> (和所有其他支持的 contenteditable)
<textarea>
任何html元素(掩码文本内容或使用jQuery.val设置maskedvalue)

3.默认掩码定义

9 : 数字
a : 按字母顺序排列
* : 字母数字

扩展中定义了更多的定义，此类定义都被称为掩码，一个掩码代表一个字符，后面文章也会以掩码来描述这类定义。
你可以在js文件中找到信息或通过进一步探索选项。

4.掩码类型

1)静态掩码

这些是掩码的基本。掩码被定义，并且在输入期间不会改变。

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

2)可选掩码

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

$('#test').inputmask('(99) 9999[9]-9999');
该掩码允许输入（99）99999-9999或（99）9999-9999。
Input => 12123451234 mask => (12) 12345-1234 (trigger complete)
Input => 121234-1234 mask => (12) 1234-1234 (trigger complete)
Input => 1212341234 mask => (12) 12341-234_ (trigger incomplete)

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

skipOptionalPartCharacter: " "

Input => 121234 1234 mask => (12) 1234-1234 (trigger complete)

如果在参数（默认）中设置了clearmaskonlostfocus:true，则在未填充可选部分时，遮罩将清除可选掩码末尾部分。

例：

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

当该输入框获得焦点并且为值空时，用户将看到完整的掩码”___-___“。

当必需的掩码部分被填充并且该输入框失去焦点时，用户将看到123。

当必需部分和可选部分都填写完毕，并且输入框失去焦点时，用户将看到123-ABC。

带贪恋匹配的可选掩码

当定义一个可选的掩码和greedy:false选项时，input mask将首先显示尽可能小的掩码作为输入。

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

这个初始掩码将以 “_” 替代 “_-____”.

3)动态掩码

动态掩码可以在输入期间更改。要定义动态部分，请使用{}。
{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"
      }
    }
  });
});

4)并集掩码

并集掩码的语法和 OR 一样，通常通过竖线(”|“)来反应并集的关系，只要满足其中之一的条件就允许输入

例子如下：

"a|9" => a 或者 9 
"(aaa)|(999)" => aaa 或者 999 
"(aaa|999|9AA)" => aaa or 999 或者 9AA

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

或者

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

5)掩码预处理，掩码函数

在使用插件时，掩码可以通过函数进行返回，你可以在函数里面做一些自己判断。使用方法如下

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

6)即时编译JIT掩码

这个没用过不知道有啥用..

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

5.自定义限制

inputmask通过自定义掩码或者别名来实现功能的动态扩展

1)自定义验证，validator定义

validator参数可以是一个正则表达式，也可以是一个函数【validator(chrs(字符), maskset(掩码集), pos, strict, opts)】

如果是函数，则返回结果可以是true或者false，也可以是一个固定的对象，对象参数解释如下：

pos : 字符插入的位置

c : 需要插入的字符

caret : 缺省符位置

remove : 删除的坐标，或者多个坐标[pos1,pos2]

insert : 添加的坐标 :

{ pos : position to insert, c : character to insert }
[{ pos : position to insert, c : character to insert }, { ...}, ... ]
refreshFromBuffer :是否刷新验证，true刷新所有字符，{start:,end:}刷新相应坐标的字符

2)自定义符号

当您插入或删除字符时，只有当定义类型相同时，它们才会被转义。可以通过给出自定义符号来重写此行为。（见示例x，y，z，可用于IP地址屏蔽，验证不同，但允许在定义之间转义字符）

Inputmask.extendDefinitions({
  'f': {  //掩码字符
    "validator": "[0-9\(\)\.\+/ ]"
  },
  'g': {
    "validator": function (chrs, buffer, pos, strict, opts) {
      //你的逻辑代码 and return true, false, or { "pos": new position, "c": character to place }
    }
  },
  'j': { 
    validator: "(19|20)\\d{2}"//年份验证
  },
  'x': {
    validator: "[0-2]",
    definitionSymbol: "i" //这允许用相同的掩码符号从其他定义转义值。
  },
  '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);
    },
    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);
    },
    definitionSymbol: "i"
  }
});

3)占位符，placeholder

可以为字符串或者函数

4)默认值设置

默认设置如下:

Inputmask.extendDefaults({
  'autoUnmask': true
});
Inputmask.extendDefinitions({
  'A': {
    validator: "[A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]",
    casing: "upper" //自动转换为大写
  },
  '+': {
    validator: "[0-9A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]",
    casing: "upper"
  }
});
Inputmask.extendAliases({
  'numeric': {
    mask: "r",
    greedy: false,
    ...
  }
});

但是如果属性是在别名中定义的，则需要设置别名定义。这也是默认插件选项。如果别名定义已经存在，你可以重写这个别名的属性。

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

但是，更改别名属性的首选方法是创建新的别名来继承原有别名定义。

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

定义后，可以通过以下方式调用别名：

Inputmask("myNum").mask(selector);

所有回调都可以定义实现。这意味着您可以通过设置默认值来设置回调的常规实现。

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

6.插件方法

1)初始化输入限制，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);

2)unmaskedvalue:

　　获取掩码格式

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

或

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

3)去除掩码

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

4)remove

　　卸载输入限制

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

或

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

或

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

5)getemptymask

　　获取空的掩码格式

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

6)hasMaskedValue

　　检查当前对象是否使用了mask验证；当前只能使用jquery.val 选择器时才能生效

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

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

7)isComplete

　　检测当前值是否通过完整的验证。

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

8)getmetadata

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

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

9)setvalue

　　使用jquery选择器为inputmask设置一个值，无论情况如何，它都会触发inputmask使用的内部事件。这在用jquery.clone克隆inputmask时特别有用。克隆inputmask不是一个完全功能的克隆。在第一个事件（mouseenter，focus，…）中，inputmask可以检测到它是否在克隆的地方，并可以重新激活屏蔽。但是，当直接使用jquery设置值时，在这种情况下不会触发任何事件。setValue功能可以为您实现这一点。

$(selector).inputmask("setvalue", value);

var selector = document.getElementById("selector");
selector.inputmask.setValue(value);

Inputmask.setValue(selector, value);

10)option(options, noremask)

　　获取或设置现有输入掩码的参数。Option方法的目的是在以后向mask对象添加额外的参数，如回调等。

　　如果设置了额外参数，则会自动重新应用mask对象，除非您对其他参数设置禁用自动应用。

　　设置选项：

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

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

11)format

　　可以使用inputmask来格式化给定的值，而不是屏蔽输入元素。

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

12)isValid

　　根据掩码验证给定值。

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

7.插件参数Options:

1)placeholder

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

您可以简单地通过添加占位符选项来填充字符掩码。

例如，占位符：“ ”将用空值自动填充

如果不希望使用占位符可以设置为””

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

或使用多字符的占位

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

2)optionalmarker

用于指示mask表达式中可选符号的符号定义。(可选符号默认为[])

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

3)quantifiermarker

用于在mask表达式中表示量词的符号的定义。(默认为{})

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

4)groupmarker

用于在mask表达式中，表达式之间分组的符号的定义。(默认为())

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

5)alternatormarker

用于设置表达式中逻辑”或“符号的符号定义。（默认 |）

alternatormarker: "|"

6)escapeChar

用于设置表达式中转义符号的符号定义。（默认\\）

escapeChar: "\\"

7)mask

使用掩码来限制文本

Inputmask({ mask: "9{*}").mask(selector);

8)regex

使用正则表达式来限制文本

Inputmask({ regex: "[0-9]*" }).mask(selector);

当使用正则时，请注意需要双重转义或使用string.raw和字符串文字来传递参数。

Inputmask({ regex: "\\d*" }).mask(selector);
~
Inputmask({ regex: String.raw`\d*` }).mask(selector);

9)oncomplete

当输入完整时执行的函数

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

10)onincomplete

当输入不完整时执行的函数，将会在失去焦点的时候触发

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

11)oncleared

当输入清空时执行的函数

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

12)repeat

定义掩码重复次数

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

13)greedy

默认：false, 会尽可能多地匹配。非贪婪重复函数。

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

将非贪婪选项设置为false时，可以将*指定为repeat。这是一个无休止的重复。

14)autoUnmask

检索时自动取消掩码。

默认值：false。

当将此选项设置为true时，插件还需要取消初始值的掩码。

15)removeMaskOnSubmit

在提交表单之前删除此掩码。

默认：false

16)clearMaskOnLostFocus

当焦点离开时移除空的掩码，或者掩码不为空时移除可选部分的掩码

默认值：true

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

17)insertMode

切换以插入或覆盖输入。

默认值：true。

按Insert键可以更改此选项。

18)clearIncomplete

当焦点离开时并且输入不是完整的数据，将清空数据

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

19)aliases

别名的定义。

通过别名，您可以定义一个复杂的掩码定义，并使用别名来调用它。这主要是为了简化掩码的使用。扩展名中自带的一些别名是：email、currency、decimal、integer、date、datetime、dd/mm/yyyy等。

首先，必须创建别名定义。别名定义可以包含掩码、自定义定义、要使用的掩码参数等等。

传入别名时，首先解析别名，然后应用其他参数。因此，您可以调用别名并传递另一个要应用于别名的掩码。这也意味着您可以编写别名，这些别名“继承”另一个别名。

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

使用:

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

或

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

您还可以调用别名的同时并使用其他参数扩展它

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

或

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

20)alias

用来使用别名

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

21)onKeyDown

这个不用解释了吧，参数主要为这些（event, buffer, caretPos, opts）

22)onBeforeMask

在mask验证初始值之前执行，以允许对初始值进行预处理。

函数参数：initialValue，opts

函数返回：processedValue

23)onBeforePaste

此回调允许在实际处理mask值之前处理粘贴的值。这可以在处理之前除去一些字符操作。

函数参数：PastedValue，opts

函数返回：processedValue

$(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

24)onBeforeWrite

验证元素之前执行写入

使用它可以对输入进行一些额外的处理。这在实现别名（例如十进制别名）时很有用，在离开输入字段时自动填充数字。

函数参数：event, buffer, caretPos, opts

函数返回：command object(请参见自定义定义）

25)onUnMask

在取消掩码后执行，对UnmaskedValue进行处理。

函数参数：maskedValue、unmaskedValue

函数返回：processedValue

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

26)showMaskOnFocus

当输入框获得焦点时显示掩码。（默认值=true）

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

如果不想在文本框里面有类似palceholder的掩码存在可以设置为false，同时showMaskOnHover也最好设置为false

27)showMaskOnHover

当鼠标移动到输入框时显示掩码。（默认值=true）

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

28)onKeyValidation

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

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

29)numericInput

数字输入方向。将插入符号保留在末尾。

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

30)rightAlign

将输入值右对齐

通过设置RightAlign，您可以指定将输入掩码右对齐。这仅适用于numericinput选项或dir属性的组合。默认值是true。

31)undoOnEscape

使Escape的行为类似于撤消。（CTRL—Z）

按Escape可将值还原为焦点前的值。

默认值：true

32)radixPoint (numerics)

定义小数点（十进制分隔符）

默认：“

33)groupSeparator (numerics)

分组分隔符
默认: “”

34)keepStatic

默认值：null（~false）与并集语法结合使用，在输入时尝试保持掩码静态。

例如：

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

输入121234523=>将格式化为+55-12-1234-5123 再输入 4=>将转换成+55-12-12345-1234

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

35)positionCaretOnTab

启用后，在TAB后插入缺省符号，默认值：true

36)tabThrough

允许通过掩码字段的不同部分进行切换。
默认: false

37)definitions

38)ignorables

39)isComplete

使用这个函数（钩子），您可以覆盖isComplete函数的默认实现。

参数 => buffer,opts

返回 => true|false

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

40)postValidation

提交验证钩子函数，结果为表单的isValid，对验证整个实体的时候又有

参数 => buffer, pos, currentResult, opts
返回 => true|false|command object

41)preValidation

这个钩子函数有助于其他验证

参数 => buffer, pos, char, isSelection, opts

返回 =>true/false/command object

当返回true时，普通的验证将会进入，否则将会跳过普通验证

42)staticDefinitionSymbol

staticDefinitionSymbol参数用于指示掩码中的静态条目可以与某个定义匹配。特别适用于并集匹配，这样遮罩中的静态元素可以匹配另一个并集。

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

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

43)nullable

用户未输入任何内容时不返回任何内容。

默认值：true

44)noValuePatching

禁用值属性修改补齐

默认: false

45)positionCaretOnClick

单击时插入占位符号的位置。

参数:

none
lvp (基于最后一个有效位置（默认）)
radixFocus (初始单击时位置插入符号到radixpoint)
select (选择整个输入)
ignore (忽略单击并继续掩码)

默认: “lvp”

46)casing

数据转换。参数: null, “upper”, “lower” or “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

47)inputmode

默认值：“verbatim”指定输入模式-当浏览器开始支持它们时已经到位

https://html.spec.whatwg.org/#input-modalities:-the-inputmode-attribute

48)colorMask

默认:false,创建一个带样式的掩码

您需要在页面中包含inputmask.css才能使用此选项。

请参阅inputmask.css以获取有关所用样式的更多信息。如果需要自定义定位，可以重写inputmask.prototype.positioncolormask。

Inputmask.prototype.positionColorMask = function (input, template) {
                template.style.left = input.offsetLeft + "px";
                template.zIndex = input.zIndex - 1;
           }

49)disablePredictiveText

默认: false 在移动设备上禁用预测文本。

能做如下事情.

将输入类型更改为密码=>禁用预测性文本
启用 colorMask 创建一个 div 并围绕 input.所以我们输入的隐藏密码将会渲染到创建的div上面 .

使用 colorMask,您需要包含inputmask.css，您可能需要添加一些css调整，使其在页面中看起来正常。

50)importDataAttributes

指定使用数据输入掩码属性或忽略它们。

如果不使用数据属性，可以通过指定importdataattributes:false禁用导入。

默认: true

51)shiftPositions

在输入和删除时移动掩码条目的位置。在某些情况下，不需要移动掩码实体。

例如日期掩码。日复一日毫无意义

默认: true

8.使用方法归纳

1)设置值并应用掩码

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

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

使用autounmask参数，您可以将$.fn.val（或value属性）的返回更改为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)
});

2)转义特殊掩码符号

使用 ”\“符号进行转义

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

3)输入数据自动转换

使用Casing参数可以为 null, “upper”(大写), “lower”(小写) or “title”.等

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

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

9.支持的html标记参数

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属性应用inputmask。在属性中，指定掩码的参数。这将使用$.Parsejson进行解析（目前），因此请确保使用格式良好的JSON字符串，而不使用{}.

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

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

data-inputmask-<option> 属性

所有的参数都可以使用这种方式进行设置

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

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

10.jQuery.clone

当你要克隆inputmask时，inputmask会在输入发生的第一个事件（mouseenter、focus…）上重新激活。

如果想要在克隆的inputmask上设置值，并且想要重新激活掩码,使用：$(input).inputmask(“setvalue”, value)来进行激活设置

正文完

可以使用微信扫码关注公众号（ID：xzluomor）

AI AR Github HTML Java

发表至： Web

2024-05-13

WebRTC开源项目-手把手教你搭建AppRTC

6个适合个人网站流量变现赚钱的站长广告联盟平台推荐

成为知乎「2022 年度新知答主」是一种什么样的体验？

SEO优化教程：如何设置好WordPress网站的SEO优化

大神Karpathy强推，分词领域必读：自动钓鱼让大模型“发疯”的token，来自Transformer作者创业公司

jquery.Inputmask 插件用法（中文API文档）

jquery.Inputmask 可以算是input文本输入限制的神器了，内部融合了多种输入限制， 如金额，电话号码，身份证号，网关等..,并且还可以自定义规则。

inputmask 据说最早起源于应用程序里面的插件，后面被翻译成了js，jq插件。 目前inputmask的文档大多是英文，下面将部分功能翻译成中文文档。转载请注明出处谢谢

一、插件引用

二.使用方法

1.插件初始化加载

1)通过 Inputmask 类实例的加载方法如下:

2)通过 jquery 加载方法如下:

3)通过 data-inputmask 元素标签加载方法如下:

4)参数传递方式

2.允许使用的HTML标签元素

3.默认掩码定义

4.掩码类型

1)静态掩码

2)可选掩码

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

3)动态掩码

4)并集掩码

5)掩码预处理，掩码函数

6)即时编译JIT掩码

5.自定义限制

1)自定义验证，validator定义

2)自定义符号

3)占位符，placeholder

4)默认值设置

6.插件方法

1)初始化输入限制，mask(elems):

2)unmaskedvalue:

3)去除掩码

4)remove

5)getemptymask

6)hasMaskedValue

7)isComplete

8)getmetadata

9)setvalue

10)option(options, noremask)

11)format

12)isValid

7.插件参数Options:

1)placeholder

2)optionalmarker

3)quantifiermarker

4)groupmarker

5)alternatormarker

6)escapeChar

7)mask

8)regex

9)oncomplete

10)onincomplete

11)oncleared

12)repeat

13)greedy

14)autoUnmask

15)removeMaskOnSubmit

16)clearMaskOnLostFocus

17)insertMode

18)clearIncomplete

19)aliases

20)alias

21)onKeyDown

22)onBeforeMask

23)onBeforePaste

24)onBeforeWrite

25)onUnMask

26)showMaskOnFocus

27)showMaskOnHover

28)onKeyValidation

29)numericInput

30)rightAlign

31)undoOnEscape

32)radixPoint (numerics)

33)groupSeparator (numerics)

34)keepStatic

35)positionCaretOnTab

36)tabThrough

37)definitions

38)ignorables

39)isComplete

40)postValidation

41)preValidation

jquery.Inputmask 可以算是input文本输入限制的神器了，内部融合了多种输入限制，如金额，电话号码，身份证号，网关等..,并且还可以自定义规则。

　 inputmask 据说最早起源于应用程序里面的插件，后面被翻译成了js，jq插件。目前inputmask的文档大多是英文，下面将部分功能翻译成中文文档。转载请注明出处谢谢

　1.插件初始化加载

　　1)通过 Inputmask 类实例的加载方法如下:

　　2)通过 jquery 加载方法如下:

　　3)通过 data-inputmask 元素标签加载方法如下:

　　4)参数传递方式