插件 jQuery.inputmask 中文API文档
插件 jQuery.inputmask 中文API文档 https://github.com/RobinHerbots/Inputmask
输入掩码
nputmask 是一个创建输入掩码的 javascript 库。Inputmask 可以针对 vanilla javascript，jQuery 和 jqlite 运行。
输入掩码通过确保预定义格式来帮助用户输入。这可用于日期，数字，电话号码，……
强调：
- 使用方便
- 任选部件都在面具中
- 定义隐藏复杂性的别名的可能性
- 日期 / 日期时间掩码
- 数字面具
- 很多回调
- 非贪婪的面具
- 可以通过选项启用 / 禁用 / 配置许多功能
- 支持 readonly / disabled / dir =“rtl”属性
- 支持 data-inputmask 属性
- 交流发电机面罩
- 正则表达式面罩
- 动态遮罩
- 预处理面罩
- JIT 掩蔽
- 没有输入元素的值格式化 / 验证
- AMD / CommonJS 支持
- dependencyLibs：vanilla javascript，jQuery，jqlite
- Android 支持
演示页面见 http://robinherbots.github.io/Inputmask
感谢 Jetbrains 为其出色的 Webstorm IDE 提供免费许可。
建立
dependencyLibs
Inputmask 可以针对不同的 javascript 库运行。你可以选择：
- inputmask.dependencyLib（vanilla）
- inputmask.dependencyLib.jquery
- inputmask.dependencyLib.jqlite
- ….（欢迎其他人）
带有< script>标签的经典 Web
包括您可以在 dist 文件夹中找到的 js 文件。
使用 jQuery 作为 dependencylib 的输入掩码。
<script src="jquery.js"></script>
<script src="dist/jquery.inputmask.js"></script>
带有 vanilla dependencylib 的输入掩码。
<script src="dist/inputmask.js"></script>
如果您想自动将输入掩码绑定到使用 data-inputmask- … 属性标记的输入，您可能还需要包含 inputmask.binding.js
<script src="dist/bindings/inputmask.binding.js"></script>
WebPack
安装包
npm install inputmask --save
安装最新的测试版
npm install inputmask@next --save
在你的模块中
如果要包含 Inputmask 和所有扩展名。
var Inputmask = require('inputmask');
//es6
import Inputmask from "inputmask";
对于个人扩展。每个扩展都会导出 Inputmask，因此您只需要导入扩展名。见例子。
require("inputmask/lib/extensions/inputmask.numeric.extensions");
var Inputmask = require("inputmask/lib/extensions/inputmask.date.extensions");
//es6
import "inputmask/lib/extensions/inputmask.numeric.extensions";
import Inputmask from "inputmask/lib/extensions/inputmask.date.extensions";
选择 dependencyLib
默认情况下，使用 vanilla dependencyLib。您可以通过在 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);
Inputmask({ regex: "\\d*" }).mask(selector);
Inputmask({ regex: String.raw`\d*` }).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': 'datetime'" />
<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- < 选项名称 > =“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();
});
允许的 HTML 元素
- < input type=“text”>
- < input type=“search”>
- < input type=“tel”>
- < input type=“url”>
- < input type=“password”>
- < div contenteditable=“true”> （以及所有其他人都满意的支持）
- < textarea>
- 任何 html 元素（掩码文本内容或使用 jQuery.val 设置 maskedvalue）
允许的输入类型在 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
另外还有另一个可配置字符，用于跳过掩码中的可选部分。
skipOptionalPartCharacter: " "
输入 => 121234 1234 mask =>（12）1234-1234（触发完成）
当 clearMaskOnLostFocus: true 在选项中设置时（默认），当未填充时，掩码将清除可选部分，这仅在可选部分位于掩码末尾时才会清除。
例如，给定：
$('#test').inputmask('999[-AAA]');
虽然该字段具有焦点并且为空白，但用户将看到完整的掩码___-___。当填充掩模的所需部分并且场失去焦点时，用户将看到 123。当填充掩模的必需部分和可选部分并且场失去焦点时，用户将看到 123-ABC。
贪婪假的可选面具
当使用 greedy：false 选项定义可选掩码时，输入掩码将首先显示最小可能掩码作为输入。
$(selector).inputmask({ mask: "9[-9999]", greedy: false });
显示的初始掩码将是“ _ ”而不是“ _ -____”。
动态面具
动态蒙版可以在输入期间更改。要定义动态部分，请使用{}。
$(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!#$%&'*+/=?^_`{|}~\-]",
casing: "lower"
}
}
});
//decimal mask
Inputmask("(.999){+|1},00", {
positionCaretOnClick: "radixFocus",
radixPoint: ",",
_radixDance: true,
numericInput: true,
placeholder: "0",
definitions: {
"0": {
validator: "[0-9\uFF11-\uFF19]"
}
}
}).mask(selector);
});
交流发电机面罩
交流发电机语法类似于 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]",
casing: "upper"
}
}
});
要么
$("selector").inputmask({
mask: ["99.9", "X"],
definitions: {
"X": {
validator: "[xX]",
casing: "upper"
}
}
});
预处理掩码
您可以将掩码定义为可以允许预处理结果掩码的函数。示例排序多个掩码或通过 ajax 动态检索掩码定义。预处理 fn 应返回有效的掩码定义。
$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }});
JIT Masking
及时掩盖。使用 jitMasking 选项，您可以启用 jit masking。只有用户输入的字符才能看到遮罩。默认值：false
值可以是 true 或阈值数或 false。
Inputmask("datetime", { jitMasking: true }).mask(selector);
