Inputmask

Inputmask 介绍

Inputmask 是一个 jQuery 输入插件，用于创建确保让用户能够按预先定义好格式输入的文本框。这些格式可以是日期，数字，电话号码等。 

用法

通过 Inputmask 类

<script src="jquery.js"></script>

<script src="inputmask.js"></script>

<script src="inputmask.???.Extensions.js"></script>

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

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

im.mask(selector);

Inputmask({"mask": "[phone]",.... other options .....}).mask(selector);

Inputmask("9-a{1,3}9{1,3}").mask(selector);

Inputmask("9",{ repeat: 10 }).mask(selector);

通过 jquery 插件

<script src="jquery.js"></script>

<script src="inputmask.js"></script>

<script src="inputmask.???.Extensions.js"></script>

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

或使用捆绑的版本

<script src="jquery.js"></script>

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

$(document).ready(function(){

$(selector).inputmask("99-9999999"); //static mask

$(selector).inputmask({"mask": "[phone]"}); //specifying options

$(selector).inputmask("9-a{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 属性传递。使用 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");

});

如果你想自动将输入掩码绑定到标有 data-inputmask- …属性的输入，需要引入 inputmask.binding.js

...

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

...

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

看看 inputmask.loader.js 的用法。

示例config.js

paths: {

...

"inputmask.dependencyLib": "../dist/inputmask/inputmask.dependencyLib",

"inputmask": "../dist/inputmask/inputmask",

...

}

允许的html元素

<input type="text">

<input type="tel">

<input type="password">

<div contenteditable="true"> (和所有其他支持的 contenteditable)

<textarea>

任何html元素(掩码文本内容或使用jQuery.val设置maskedvalue)

默认掩码定义

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。

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)

动态掩码

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

{n} => n repeats

{n,m} => from n to m repeats

Also {+} and {*} is allowed. + start from 1 and * start from 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}[.*{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"

}

}

});

});

网站地址:http://robinherbots.github.io/Inputmask

GitHub:https://github.com/RobinHerbots/Inputmask

网站描述:一个 jQuery 格式化输入插件

Inputmask

官方网站：http://robinherbots.github.io/Inputmask