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": "(999) 999-9999",.... 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": "(999) 999-9999"}); //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 的 用法 。
示例con fig .js
paths: {
...
"inputmask.dependencyLib": " dis t/inputmask/inputmask.dependencyLib",
"inputmask": " dis t/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:","");
},
de Finitio ns: {
'*': {
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
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。