jQuery Input Mask Plug-in

一般用法

  • 静态(static mask)
$(selector).inputmask('999-AAAA-9999')

$(selector).inputmask({mask:'999-AAAA-9999', other_options: xxx})

默认带的字符定义有
9 : 数字
A : 字母
* : 数字或字母

  • 动态(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
跟[]相关的属性 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以外,插件中还预定义了许多预置的mask,这些用aliase来体现

$("#currecy").inputmask({ alias: "currency"});

预置的aliase里面,我主要用了一下关于数字相关的

  • numeric 数字,带小数点
  • decimal 与numeric 相同
  • currency 货币
  • percentage 百分比
  • integer 整数

除此以外还有日期相关的,我还没用到。
其中numeric 是基础,其他aliase都是基于numeric的扩展。
每个aliase的属性也可以修改
具体属性看这里

这里特殊说一下,除了可以在设置input的时候指定属性外,也可以全局的修改这些属性

Inputmask.extendAliases({
      'numeric': {
        autoGroup: !0,
        groupSeparator: ',',
        placeholder: "0",
        clearMaskOnLostFocus: !1,
        digitsOptional: !1,
        allowPlus : !1
      }
    });

当然,官方文档中推荐的方式是,不要去修改这些属性,而是去自定义一个aliase

Inputmask.extendAliases({ 
  'myNum': { 
    alias: "numeric", 
    placeholder: '', 
    allowPlus: false,
    allowMinus: false 
}});

看了一下插件的源代码,可以看看这些值的默认值
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




但要加一句js代码

$(document).ready(function(){
   $(":input").inputmask();
});

还可以用这样的格式声明属性

data-inputmask-<***the name of the option***>="value"



你可能感兴趣的:(jQuery Input Mask Plug-in)