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

最新推荐文章于 2020-12-19 08:54:23 发布

li.siyuan

最新推荐文章于 2020-12-19 08:54:23 发布

阅读量1.7k

点赞数 1

分类专栏：前端

原文链接：https://www.cnblogs.com/daxiongblog/p/9850171.html

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

　 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 元素标签加载方法如下:

<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"));
});

　　4)参数传递方式

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

<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("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)来进行激活设置

li.siyuan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery.Inputmask 插件用法（中文API文档）

jquery.Inputmask 插件用法（中文API文档）　　 jquery.Inputmask 可以算是input文本输入限制的神器了，内部融合了多种输入限制，如金额，电话号码，身份证号，网关等..,并且还可以自定义规则。　 inputmask 据说最早起源于应用程序里面的插件，后面被翻译成了js，jq插件。目前inputmask的文档大多是英文，下面将部分功能翻译...
复制链接

扫一扫