Inputmask 插件用法

 

用法

通過 Inputmask 類

<scriptsrc="jquery.js"></script>
<scriptsrc="inputmask.js"></script>
<scriptsrc="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 插件

<scriptsrc="jquery.js"></script>
<scriptsrc="inputmask.js"></script>
<scriptsrc="inputmask.???.Extensions.js"></script>
<scriptsrc="jquery.inputmask.js"></script>

 

或使用捆綁的版本

<scriptsrc="jquery.js"></script>
<scriptsrc="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}9{1,3}"); //mask with dynamic syntax
});

 

通過 data-inputmask 屬性

<inputdata-inputmask="'alias': 'date'" />
<inputdata-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<inputdata-inputmask="'mask': '99-9999999'" />
$(document).ready(function(){
  $(":input").inputmask();
  or
  Inputmask().mask(document.querySelectorAll("input"));
});

 

任何選項也可以通過使用 data 屬性傳遞。使用 data-inputmask-<選項的名稱>=“value”

<inputid="example1"data-inputmask-clearmaskonlostfocus="false" />
<inputid="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

...
<scriptsrc="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}]@*{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"
      }
    }
  });
});