一般用法
- 靜態(tài)(static mask)
$(selector).inputmask('999-AAAA-9999')
或
$(selector).inputmask({mask:'999-AAAA-9999', other_options: xxx})
默認(rèn)帶的字符定義有
9 ： 數(shù)字
A ： 字母
* ： 數(shù)字或字母
- 動(dòng)態(tài)(Dynamic mask)
$(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
{n} => n repeats
{n,m} => from n to m repeats
Also {+} and {*} is allowed. + start from 1 and * start from 0
- 可選(Optional mask)
$('#test').inputmask('(99) 9999[9]-9999');
This mask wil allow input like (99) 99999-9999
or (99) 9999-9999
跟[]相關(guān)的屬性 greedy
$(selector).inputmask({ mask: "9[-9999]", greedy: false });
The initial mask shown will be "_" instead of "_-____".
- 或（Alternator mask）
"a|9" => a or 9"
(aaa)|(999)" => aaa or 999
別名（Aliase）
除了自己寫mask以外饮潦，插件中還預(yù)定義了許多預(yù)置的mask供嚎，這些用aliase來體現(xiàn)
$("#currecy").inputmask({ alias: "currency"});
預(yù)置的aliase里面弊予，我主要用了一下關(guān)于數(shù)字相關(guān)的
- numeric 數(shù)字芬失，帶小數(shù)點(diǎn)
- decimal 與numeric 相同
- currency 貨幣
- percentage 百分比
- integer 整數(shù)
除此以外還有日期相關(guān)的，我還沒用到绊序。
其中numeric 是基礎(chǔ)稼虎，其他aliase都是基于numeric的擴(kuò)展咽笼。
每個(gè)aliase的屬性也可以修改
具體屬性看這里
這里特殊說一下，除了可以在設(shè)置input的時(shí)候指定屬性外暖释，也可以全局的修改這些屬性
Inputmask.extendAliases({
'numeric': {
autoGroup: !0,
groupSeparator: ',',
placeholder: "0",
clearMaskOnLostFocus: !1,
digitsOptional: !1,
allowPlus : !1
}
});
當(dāng)然袭厂，官方文檔中推薦的方式是，不要去修改這些屬性球匕，而是去自定義一個(gè)aliase
Inputmask.extendAliases({
'myNum': {
alias: "numeric",
placeholder: '',
allowPlus: false,
allowMinus: false
}});
看了一下插件的源代碼纹磺，可以看看這些值的默認(rèn)值
numeric:
placeholder: "",
greedy: !1,
digits: "*",
digitsOptional: !0,
radixPoint: ".",
positionCaretOnClick: "radixFocus",
groupSize: 3,
groupSeparator: "",
autoGroup: !1,
allowPlus: !0,
allowMinus: !0,
currency
prefix: "$ ",
groupSeparator: ",",
alias: "numeric",
placeholder: "0",
autoGroup: !0,
digits: 2,
digitsOptional: !1,
clearMaskOnLostFocus: !1
decimal
alias: "numeric"
integer
alias: "numeric",
digits: 0,
radixPoint: ""
percentage
alias: "numeric",
digits: 2,
radixPoint: ".",
placeholder: "0",
autoGroup: !1,
min: 0,
max: 100,
suffix: " %",
allowPlus: !1,
allowMinus: !1
HTML中聲明 mask
使用inputmask 也可以在HTML中聲明，而不用javascript
<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />
但要加一句js代碼
$(document).ready(function(){
$(":input").inputmask();
});
還可以用這樣的格式聲明屬性
data-inputmask-<***the name of the option***>="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])?" />
