jquery.Inputmask 插件用法（中文API文檔）

本文轉載自查看原文 2018-10-25 15:32 7753 inputmask.js/ 最好用的文本框輸入限制插件/ Jquery/javascript/ 開發文檔/ 中文API

　 jquery.Inputmask 可以算是input文本輸入限制的神器了，內部融合了多種輸入限制，如金額，電話號碼，身份證號，網關等..,並且還可以自定義規則。

　 inputmask 據說最早起源於應用程序里面的插件，后面被翻譯成了js，jq插件。目前inputmask的文檔大多是英文，下面將部分功能翻譯成中文文檔。轉載請注明出處謝謝

　　文檔及項目源地址 https://github.com/RobinHerbots/Inputmask

一、插件引用

js引用的方法很簡單，和其他插件一樣，都有簡單版和完整版，簡單版如果用到其他插件需要手動引如相關模塊，完整版則包含了所有的插件，這個地方只簡單介紹完整版的引用

<script src="jquery.js"></script>
<script src="dist/jquery.inputmask.bundle.js"></script>

二.使用方法

　1.插件初始化加載

　　1)通過 Inputmask 類實例的加載方法如下:

var selector = document.getElementById("selector");

var im = new Inputmask("99-9999999");
im.mask(selector);

Inputmask({"mask": "(999) 999-9999", .... 其他參數 .....}).mask(selector);
Inputmask("9-a{1,3}9{1,3}").mask(selector);
Inputmask("9", { repeat: 10 }).mask(selector);

　　2)通過 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
});

　　3)通過 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"));
});

　　4)參數傳遞方式

　　任何參數也可以通過使用 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");
});

如果你使用像 requireJS 這樣的模塊加載器

看看 inputmask.loader.js 的用法。

示例config.js

paths: {
  ...
  "inputmask.dependencyLib": "../dist/inputmask/inputmask.dependencyLib",
  "inputmask": "../dist/inputmask/inputmask",
  ...
}

2.允許使用的HTML標簽元素

<input type="text">
<input type="tel">
<input type="password">
<div contenteditable="true"> (和所有其他支持的 contenteditable)
<textarea>
任何html元素(掩碼文本內容或使用jQuery.val設置maskedvalue)

3.默認掩碼定義

9 : 數字
a : 按字母順序排列
* : 字母數字

擴展中定義了更多的定義，此類定義都被稱為掩碼，一個掩碼代表一個字符，后面文章也會以掩碼來描述這類定義。
你可以在js文件中找到信息或通過進一步探索選項。

4.掩碼類型

1)靜態掩碼

這些是掩碼的基本。掩碼被定義，並且在輸入期間不會改變。

$(document).ready(function(){
  $(selector).inputmask("aa-9999");  //static mask
  $(selector).inputmask({mask: "aa-9999"});  //static mask
});

2)可選掩碼

可以在掩碼中定義一些部分是可選的。通過使用[]。

$('#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)

skipOptionalPartCharacter:另外還有一個可配置字符，用於跳過掩碼中的可選部分。

skipOptionalPartCharacter: " "

Input => 121234 1234 mask => (12) 1234-1234 (trigger complete)

如果在參數（默認）中設置了clearmaskonlostfocus:true，則在未填充可選部分時，遮罩將清除可選掩碼末尾部分。

例：

$('#test').inputmask('999[-AAA]');

當該輸入框獲得焦點並且為值空時，用戶將看到完整的掩碼”___-___“。

當必需的掩碼部分被填充並且該輸入框失去焦點時，用戶將看到123。

當必需部分和可選部分都填寫完畢，並且輸入框失去焦點時，用戶將看到123-ABC。

帶貪戀匹配的可選掩碼

當定義一個可選的掩碼和greedy:false選項時，input mask將首先顯示盡可能小的掩碼作為輸入。

$(selector).inputmask({ mask: "9[-9999]", greedy: false });

這個初始掩碼將以 "_" 替代 "_-____".

3)動態掩碼

動態掩碼可以在輸入期間更改。要定義動態部分，請使用{}。
{n} => 重復n次
{n,m} => 重復 n 到 m 次

{+} 和 {*} 同正則一樣，+1次到多次 *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"
      }
    }
  });
});

4)並集掩碼

並集掩碼的語法和 OR 一樣，通常通過豎線(”|“)來反應並集的關系，只要滿足其中之一的條件就允許輸入

例子如下：

"a|9" => a 或者 9 
"(aaa)|(999)" => aaa 或者 999 
"(aaa|999|9AA)" => aaa or 999 或者 9AA

$("selector").inputmask("(99.9)|(X)", {
  definitions: {
    "X": {
      validator: "[xX]",
      casing: "upper"
    }
  }
});

或者

$("selector").inputmask({
  mask: ["99.9", "X"],
  definitions: {
    "X": {
      validator: "[xX]",
      casing: "upper"
    }
  }
});

5)掩碼預處理，掩碼函數

在使用插件時，掩碼可以通過函數進行返回，你可以在函數里面做一些自己判斷。使用方法如下

$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }});

6)即時編譯JIT掩碼

這個沒用過不知道有啥用..

Inputmask("datetime", { jitMasking: true }).mask(selector);

5.自定義限制

inputmask通過自定義掩碼或者別名來實現功能的動態擴展

1)自定義驗證，validator定義

validator參數可以是一個正則表達式，也可以是一個函數【validator(chrs(字符), maskset(掩碼集), pos, strict, opts)】

如果是函數，則返回結果可以是true或者false，也可以是一個固定的對象，對象參數解釋如下：

pos : 字符插入的位置

c : 需要插入的字符

caret : 缺省符位置

remove : 刪除的坐標，或者多個坐標[pos1,pos2]

insert : 添加的坐標 :

{ pos : position to insert, c : character to insert }
[{ pos : position to insert, c : character to insert }, { ...}, ... ]
refreshFromBuffer :是否刷新驗證，true刷新所有字符，{start:,end:}刷新相應坐標的字符

2)自定義符號

當您插入或刪除字符時，只有當定義類型相同時，它們才會被轉義。可以通過給出自定義符號來重寫此行為。（見示例x，y，z，可用於IP地址屏蔽，驗證不同，但允許在定義之間轉義字符）

Inputmask.extendDefinitions({
  'f': {  //掩碼字符
    "validator": "[0-9\(\)\.\+/ ]"
  },
  'g': {
    "validator": function (chrs, buffer, pos, strict, opts) {
      //你的邏輯代碼 and return true, false, or { "pos": new position, "c": character to place }
    }
  },
  'j': { 
    validator: "(19|20)\\d{2}"//年份驗證
  },
  'x': {
    validator: "[0-2]",
    definitionSymbol: "i" //這允許用相同的掩碼符號從其他定義轉義值。
  },
  'y': {
    validator: function (chrs, buffer, pos, strict, opts) {
      var valExp2 = new RegExp("2[0-5]|[01][0-9]");
      return valExp2.test(buffer[pos - 1] + chrs);
    },
    definitionSymbol: "i"
  },
  'z': {
    validator: function (chrs, buffer, pos, strict, opts) {
      var valExp3 = new RegExp("25[0-5]|2[0-4][0-9]|[01][0-9][0-9]");
      return valExp3.test(buffer[pos - 2] + buffer[pos - 1] + chrs);
    },
    definitionSymbol: "i"
  }
});

3)占位符，placeholder

可以為字符串或者函數

4)默認值設置

默認設置如下:

Inputmask.extendDefaults({
  'autoUnmask': true
});
Inputmask.extendDefinitions({
  'A': {
    validator: "[A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]",
    casing: "upper" //自動轉換為大寫
  },
  '+': {
    validator: "[0-9A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]",
    casing: "upper"
  }
});
Inputmask.extendAliases({
  'numeric': {
    mask: "r",
    greedy: false,
    ...
  }
});

但是如果屬性是在別名中定義的，則需要設置別名定義。這也是默認插件選項。如果別名定義已經存在，你可以重寫這個別名的屬性。

Inputmask.extendAliases({
  'numeric': {
    autoUnmask: true,
    allowPlus: false,
    allowMinus: false
  }
});

但是，更改別名屬性的首選方法是創建新的別名來繼承原有別名定義。

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

定義后，可以通過以下方式調用別名：

Inputmask("myNum").mask(selector);

所有回調都可以定義實現。這意味着您可以通過設置默認值來設置回調的常規實現。

Inputmask.extendDefaults({
  onKeyValidation: function(key, result){
    if (!result){
      alert('Your input is not valid')
    }
  }
});

6.插件方法

1)初始化輸入限制，mask(elems):

　　創建一個輸入限制

$(selector).inputmask({ mask: "99-999-99"});

或

Inputmask({ mask: "99-999-99"}).mask(document.querySelectorAll(selector));

或

Inputmask("99-999-99").mask(document.querySelectorAll(selector));

或

var im = new Inputmask("99-999-99");
im.mask(document.querySelectorAll(selector));

或

Inputmask("99-999-99").mask(selector);

2)unmaskedvalue:

　　獲取掩碼格式

$(selector).inputmask('unmaskedvalue');

或

var input = document.getElementById(selector);
if (input.inputmask)
  input.inputmask.unmaskedvalue()

3)去除掩碼

var unformattedDate = Inputmask.unmask("23/03/1973", { alias: "dd/mm/yyyy"}); //23031973

4)remove

　　卸載輸入限制

$(selector).inputmask('remove');

或

var input = document.getElementById(selector);
if (input.inputmask)
  input.inputmask.remove()

或

Inputmask.remove(document.getElementById(selector));

5)getemptymask

　　獲取空的掩碼格式

$(document).ready(function(){
  $("#test").inputmask("999-AAA");
  var initialValue = $("#test").inputmask("getemptymask");  // initialValue  => "___-___"
});

6)hasMaskedValue

　　檢查當前對象是否使用了mask驗證；當前只能使用jquery.val 選擇器時才能生效

$(document).ready(function(){
  function validateMaskedValue(val){}
  function validateValue(val){}

  var val = $("#test").val();
  if ($("#test").inputmask("hasMaskedValue"))
    validateMaskedValue(val);
  else
    validateValue(val);
});

7)isComplete

　　檢測當前值是否通過完整的驗證。

$(document).ready(function(){
  if ($(selector).inputmask("isComplete")){
    //do something
  }
});

8)getmetadata

　　可以通過調用getmetadata獲得掩碼定義中提供的實際掩碼的元數據。如果只提供掩碼，則getmetadata將返回掩碼定義。

$(selector).inputmask("getmetadata");

9)setvalue

　　使用jquery選擇器為inputmask設置一個值，無論情況如何，它都會觸發inputmask使用的內部事件。這在用jquery.clone克隆inputmask時特別有用。克隆inputmask不是一個完全功能的克隆。在第一個事件（mouseenter，focus，…）中，inputmask可以檢測到它是否在克隆的地方，並可以重新激活屏蔽。但是，當直接使用jquery設置值時，在這種情況下不會觸發任何事件。setValue功能可以為您實現這一點。

$(selector).inputmask("setvalue", value);

var selector = document.getElementById("selector");
selector.inputmask.setValue(value);

Inputmask.setValue(selector, value);

10)option(options, noremask)

　　獲取或設置現有輸入掩碼的參數。Option方法的目的是在以后向mask對象添加額外的參數，如回調等。

　　如果設置了額外參數，則會自動重新應用mask對象，除非您對其他參數設置禁用自動應用。

　　設置選項：

document.querySelector("#CellPhone").inputmask.option({
  onBeforePaste: function (pastedValue, opts) {
    return phoneNumOnPaste(pastedValue, opts);
  }
});

$("#CellPhone").inputmask("option", {
  onBeforePaste: function (pastedValue, opts) {
    return phoneNumOnPaste(pastedValue, opts);
  }
})

11)format

　　可以使用inputmask來格式化給定的值，而不是屏蔽輸入元素。

var formattedDate = Inputmask.format("2331973", { alias: "datetime", inputFormat: "dd/mm/yyyy"});

12)isValid

　　根據掩碼驗證給定值。

var isValid = Inputmask.isValid("23/03/1973", { alias: "datetime", inputFormat: "dd/mm/yyyy"});

7.插件參數Options:

1)placeholder

更改掩碼占位符。默認值："_"

您可以簡單地通過添加占位符選項來填充字符掩碼。

例如，占位符：“ ”將用空值自動填充

如果不希望使用占位符可以設置為""

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "placeholder": "*" });
});

或使用多字符的占位

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "placeholder": "dd/mm/yyyy" });
});

2)optionalmarker

用於指示mask表達式中可選符號的符號定義。(可選符號默認為[])

optionalmarker: { start: "[", end: "]" }

3)quantifiermarker

用於在mask表達式中表示量詞的符號的定義。(默認為{})

quantifiermarker: { start: "{", end: "}" }

4)groupmarker

用於在mask表達式中，表達式之間分組的符號的定義。(默認為())

groupmarker: { start: "(", end: ")" }

5)alternatormarker

用於設置表達式中邏輯”或“符號的符號定義。（默認 |）

alternatormarker: "|"

6)escapeChar

用於設置表達式中轉義符號的符號定義。（默認\\）

escapeChar: "\\"

7)mask

使用掩碼來限制文本

Inputmask({ mask: "9{*}").mask(selector);

8)regex

使用正則表達式來限制文本

Inputmask({ regex: "[0-9]*" }).mask(selector);

當使用正則時，請注意需要雙重轉義或使用string.raw和字符串文字來傳遞參數。

Inputmask({ regex: "\\d*" }).mask(selector);
~
Inputmask({ regex: String.raw`\d*` }).mask(selector);

9)oncomplete

當輸入完整時執行的函數

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "oncomplete": function(){ alert('inputmask complete'); } });
});

10)onincomplete

當輸入不完整時執行的函數，將會在失去焦點的時候觸發

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "onincomplete": function(){ alert('inputmask incomplete'); } });
});

11)oncleared

當輸入清空時執行的函數

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "oncleared": function(){ alert('inputmask cleared'); } });
});

12)repeat

定義掩碼重復次數

$(document).ready(function(){
  $("#number").inputmask({ "mask": "9", "repeat": 10 });  // ~ mask "9999999999"
});

13)greedy

默認：false, 會盡可能多地匹配。非貪婪重復函數。

$(document).ready(function(){
  $("#number").inputmask({ "mask": "9", "repeat": 10, "greedy": false });  // ~ mask "9" or mask "99" or ... mask "9999999999"
});

將非貪婪選項設置為false時，可以將*指定為repeat。這是一個無休止的重復。

14)autoUnmask

檢索時自動取消掩碼。

默認值：false。

當將此選項設置為true時，插件還需要取消初始值的掩碼。

15)removeMaskOnSubmit

在提交表單之前刪除此掩碼。

默認：false

16)clearMaskOnLostFocus

當焦點離開時移除空的掩碼，或者掩碼不為空時移除可選部分的掩碼

默認值：true

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999",{placeholder:" ", clearMaskOnLostFocus: true }); //default
});

17)insertMode

切換以插入或覆蓋輸入。

默認值：true。

按Insert鍵可以更改此選項。

18)clearIncomplete

當焦點離開時並且輸入不是完整的數據，將清空數據

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "clearIncomplete": true });
});

19)aliases

別名的定義。

通過別名，您可以定義一個復雜的掩碼定義，並使用別名來調用它。這主要是為了簡化掩碼的使用。擴展名中自帶的一些別名是：email、currency、decimal、integer、date、datetime、dd/mm/yyyy等。

首先，必須創建別名定義。別名定義可以包含掩碼、自定義定義、要使用的掩碼參數等等。

傳入別名時，首先解析別名，然后應用其他參數。因此，您可以調用別名並傳遞另一個要應用於別名的掩碼。這也意味着您可以編寫別名，這些別名“繼承”另一個別名。

在jquery.inputmask.xxx.extensions.js中可以找到一些示例。

使用:

$("#date").inputmask("datetime");

或

$("#date").inputmask({ alias: "datetime"});

您還可以調用別名的同時並使用其他參數擴展它

$("#date").inputmask("datetime", { "clearIncomplete": true });

或

$("#date").inputmask({ alias: "datetime", "clearIncomplete": true });

20)alias

用來使用別名

$("#date").inputmask({ alias: "email"});

21)onKeyDown

這個不用解釋了吧，參數主要為這些（event, buffer, caretPos, opts）

22)onBeforeMask

在mask驗證初始值之前執行，以允許對初始值進行預處理。

函數參數：initialValue，opts

函數返回：processedValue

23)onBeforePaste

此回調允許在實際處理mask值之前處理粘貼的值。這可以在處理之前除去一些字符操作。

函數參數：PastedValue，opts

函數返回：processedValue

$(selector).inputmask({
  mask: '9999 9999 9999 9999',
  placeholder: ' ',
  showMaskOnHover: false,
  showMaskOnFocus: false,
  onBeforePaste: function (pastedValue, opts) {
    var processedValue = pastedValue;

    //do something with it

    return processedValue;
  }
});

您還可以通過在OnBeforePaste中返回false來禁用粘貼值。

默認：調用OnBeforeMask

24)onBeforeWrite

驗證元素之前執行寫入

使用它可以對輸入進行一些額外的處理。這在實現別名（例如十進制別名）時很有用，在離開輸入字段時自動填充數字。

函數參數：event, buffer, caretPos, opts

函數返回：command object(請參見自定義定義）

25)onUnMask

在取消掩碼后執行，對UnmaskedValue進行處理。

函數參數：maskedValue、unmaskedValue

函數返回：processedValue

$(document).ready(function(){
  $("#number").inputmask("decimal", { onUnMask: function(maskedValue, unmaskedValue) {
    //do something with the value
    return unmaskedValue;
  }});
});

26)showMaskOnFocus

當輸入框獲得焦點時顯示掩碼。（默認值=true）

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999",{ showMaskOnFocus: true }); //default
});

如果不想在文本框里面有類似palceholder的掩碼存在可以設置為false，同時showMaskOnHover也最好設置為false

27)showMaskOnHover

當鼠標移動到輸入框時顯示掩碼。（默認值=true）

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999",{ showMaskOnHover: true }); //default
});

28)onKeyValidation

回調函數在每次按鍵驗證時執行，鍵和結果作為參數。

$(document).ready(function(){
  $("#ssn").inputmask("999-99-9999", {
    onKeyValidation: function (key, result) {
      console.log(key + " - " + result);
    }
  });
});

29)numericInput

數字輸入方向。將插入符號保留在末尾。

$(document).ready(function(){
  $(selector).inputmask('€ 999.999.999,99', { numericInput: true });    //123456  =>  € ___.__1.234,56
});

30)rightAlign

將輸入值右對齊

通過設置RightAlign，您可以指定將輸入掩碼右對齊。這僅適用於numericinput選項或dir屬性的組合。默認值是true。

31)undoOnEscape

使Escape的行為類似於撤消。（CTRL—Z）

按Escape可將值還原為焦點前的值。

默認值：true

32)radixPoint (numerics)

定義小數點（十進制分隔符）

默認：“

33)groupSeparator (numerics)

分組分隔符
默認: ""

34)keepStatic

默認值：null（~false）與並集語法結合使用，在輸入時嘗試保持掩碼靜態。

例如：

$(selector).inputmask({ mask: ["+55-99-9999-9999", "+55-99-99999-9999", ], keepStatic: true });

輸入121234523=>將格式化為+55-12-1234-5123 再輸入 4=>將轉換成+55-12-12345-1234

當傳遞多個掩碼（掩碼組）時，除非通過參數顯式設置，否則keepstatic將自動設置為true。

35)positionCaretOnTab

啟用后，在TAB后插入缺省符號，默認值：true

36)tabThrough

允許通過掩碼字段的不同部分進行切換。
默認: false

37)definitions

38)ignorables

39)isComplete

使用這個函數（鈎子），您可以覆蓋isComplete函數的默認實現。

參數 => buffer,opts

返回 => true|false

$(selector).inputmask({
  regex: "[0-9]*",
  isComplete: function(buffer, opts) {
    return new RegExp(opts.regex).test(buffer.join(''));
  }
});

40)postValidation

提交驗證鈎子函數，結果為表單的isValid，對驗證整個實體的時候又有

參數 => buffer, pos, currentResult, opts
返回 => true|false|command object

41)preValidation

這個鈎子函數有助於其他驗證

參數 => buffer, pos, char, isSelection, opts

返回 =>true/false/command object

當返回true時，普通的驗證將會進入，否則將會跳過普通驗證

42)staticDefinitionSymbol

staticDefinitionSymbol參數用於指示掩碼中的靜態條目可以與某個定義匹配。特別適用於並集匹配，這樣遮罩中的靜態元素可以匹配另一個並集。

在下面的示例中，我們將空格標記為“i”定義的可能匹配項。通過這樣做，即使我們已經輸入了“12 3”，掩碼也可以替代第二個掩碼。

Inputmask("(99 99 999999)|(i{+})", {
  definitions: {
    "i": {
      validator: ".",
      definitionSymbol: "*"
    }
  },
  staticDefinitionSymbol: "*"
}).mask(selector);

43)nullable

用戶未輸入任何內容時不返回任何內容。

默認值：true

44)noValuePatching

禁用值屬性修改補齊

默認: false

45)positionCaretOnClick

單擊時插入占位符號的位置。

參數:

none
lvp (基於最后一個有效位置（默認）)
radixFocus (初始單擊時位置插入符號到radixpoint)
select (選擇整個輸入)
ignore (忽略單擊並繼續掩碼)

默認: "lvp"

46)casing

數據轉換。參數: null, "upper", "lower" or "title" 或者回調函數，參數 => elem, test, pos, validPositions 返回=> charValue

casing: function(elem, test, pos, validPositions) {
    do some processing || upper/lower input property in the validPositions
    return elem; //upper/lower element
}

默認:null

47)inputmode

默認值：“verbatim”指定輸入模式-當瀏覽器開始支持它們時已經到位

https://html.spec.whatwg.org/#input-modalities:-the-inputmode-attribute

48)colorMask

默認:false,創建一個帶樣式的掩碼

您需要在頁面中包含inputmask.css才能使用此選項。

請參閱inputmask.css以獲取有關所用樣式的更多信息。如果需要自定義定位，可以重寫inputmask.prototype.positioncolormask。

Inputmask.prototype.positionColorMask = function (input, template) {
                template.style.left = input.offsetLeft + "px";
                template.zIndex = input.zIndex - 1;
           }

49)disablePredictiveText

默認: false 在移動設備上禁用預測文本。

能做如下事情.

將輸入類型更改為密碼=>禁用預測性文本
啟用 colorMask 創建一個 div 並圍繞 input.所以我們輸入的隱藏密碼將會渲染到創建的div上面 .

使用 colorMask,您需要包含inputmask.css，您可能需要添加一些css調整，使其在頁面中看起來正常。

50)importDataAttributes

指定使用數據輸入掩碼屬性或忽略它們。

如果不使用數據屬性，可以通過指定importdataattributes:false禁用導入。

默認: true

51)shiftPositions

在輸入和刪除時移動掩碼條目的位置。在某些情況下，不需要移動掩碼實體。

例如日期掩碼。日復一日毫無意義

默認: true

8.使用方法歸納

1)設置值並應用掩碼

$(document).ready(function(){
  $("#number").val(12345);

  var number = document.getElementById("number");
  number.value = 12345;
});

使用autounmask參數，您可以將$.fn.val（或value屬性）的返回更改為unmaskedValue或maskedValue。

$(document).ready(function(){
  $('#<%= tbDate.ClientID%>').inputmask({ "mask": "99/99/9999", 'autoUnmask' : true});    //  value: 23/03/1973
  alert($('#<%= tbDate.ClientID%>').val());    // shows 23031973     (autoUnmask: true)

  var tbDate = document.getElementById("<%= tbDate.ClientID%>");
  alert(tbDate.value);    // shows 23031973     (autoUnmask: true)
});

2)轉義特殊掩碼符號

使用 ”\“符號進行轉義

$(document).ready(function(){
  $("#months").inputmask("m \\months");
});

3)輸入數據自動轉換

使用Casing參數可以為 null, "upper"(大寫), "lower"(小寫) or "title".等

Inputmask.extendDefinitions({
  'A': {
    validator: "[A-Za-z]",
    casing: "upper" //auto uppercasing
  },
  '+': {
    validator: "[A-Za-z\u0410-\u044F\u0401\u04510-9]",
    casing: "upper"
  }
});

$(document).ready(function(){
  $("#test").inputmask("999-AAA");    //   => 123abc ===> 123-ABC
});

9.支持的html標記參數

RTL 屬性

<input id="test" dir="rtl" />

readonly 屬性

<input id="test" readonly="readonly" />

disabled 屬性

<input id="test" disabled="disabled" />

maxlength 屬性

<input id="test" maxlength="4" />

data-inputmask 屬性

還可以使用data inputmask屬性應用inputmask。在屬性中，指定掩碼的參數。這將使用$.Parsejson進行解析（目前），因此請確保使用格式良好的JSON字符串，而不使用{}.

<input data-inputmask="'alias': 'datetime'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />

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

data-inputmask-<option> 屬性

所有的參數都可以使用這種方式進行設置

<input data-inputmask-mask="9" data-inputmask-repeat="10" data-inputmask-greedy="false" />

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

10.jQuery.clone

當你要克隆inputmask時，inputmask會在輸入發生的第一個事件（mouseenter、focus…）上重新激活。

如果想要在克隆的inputmask上設置值，並且想要重新激活掩碼,使用：$(input).inputmask("setvalue", value)來進行激活設置

擼字不易啊，腰酸背痛

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery.inputmask 輸入框input輸入內容格式限制插件 jquery.inputmask 輸入框input輸入內容格式限制插件 jQuery插件之ajaxFileUpload API文檔 jQuery插件之ajaxFileUpload API文檔 jQuery EasyUI DataGrid API 中文文檔 jQuery 3.1 API中文文檔 jQuery EasyUI API 中文文檔 - 菜單（Menu） jQuery EasyUI API 中文文檔 - 消息框（Messager） jQuery EasyUI API 中文文檔 - 表格樹（Treegrid） jQuery EasyUI API 中文文檔 - 組合（Combo）