如何使用jquery应用自定义别名输入掩码?

时间:2016-09-12 09:58:13

标签: jquery yii2 jquery-inputmask

我正在尝试在Yii2表单输入上使用输入掩码。这是我的代码:

var IDR={"alias":"numeric","prefix":"Rp","digits":0,"digitsOptional":false,"decimalProtect":true,"groupSeparator":",","radixPoint":".","radixFocus":true,"autoGroup":true,"autoUnmask":true,"removeMaskOnSubmit":true};
Inputmask.extendAliases({"IDR": {"alias":"numeric","prefix":"Rp","digits":0,"digitsOptional":false,"decimalProtect":true,"groupSeparator":",","radixPoint":".","radixFocus":true,"autoGroup":true,"autoUnmask":true,"removeMaskOnSubmit":true} }); 

以下所有内容都会在jquery.inputmask.bundle.js上产生错误Uncaught SyntaxError:

jQuery('selector').inputmask(IDR)
jQuery('selector').inputmask("IDR")
jQuery('selector').inputmask(eval(IDR))
jQuery('selector').inputmask({'mask':'IDR'})
jQuery('selector').inputmask({'alias':'IDR'})

Chrome调试器指出了以下输入掩码代码行的问题:

42: dataoptions = JSON.parse("{" + attrOptions + "}")), dataoptions) {

1 个答案:

答案 0 :(得分:1)

我查看了jquery.inputmask 3.x的文档。根据我的理解,更改别名属性的首选方法是创建一个继承自默认别名定义的新别名。

实施例

 Inputmask.extendAliases({
      'numeric': {
        "prefix":"Rp",
        "digits":0,
        "digitsOptional":false,
        "decimalProtect":true,
        "groupSeparator":",",
        "radixPoint":".",
        "radixFocus":true,
        "autoGroup":true,
        "autoUnmask":true,
        "removeMaskOnSubmit":true
      }
    }); 

Inputmask.extendAliases({
     'IDR': {
        alias: "numeric", //it inherits all the properties of numeric    
       "prefix":"Rpoverrided"//overrided the prefix property   
      }
});

现在将输入掩码应用于您的选择器

jQuery('selector').inputmask("IDR")

下面给出了一个工作小提琴

Click to see the fiddle

我在我的Chrome浏览器上对此进行了测试,发现它正在运行。

避免收到错误Uncaught SyntaxError: 避免使用<input data-inputmask="IDR">,因为data-inputmask属性将在jQuery('selector').inputmask("IDR")命令之前进行评估。这将导致JSONparse错误:https://github.com/RobinHerbots/Inputmask

  

数据输入掩码属性   您还可以使用data-inputmask属性应用输入掩码。在属性中,您可以指定输入掩码所需的选项。这个用$ .parseJSON解析(目前),所以一定要使用格式正确的json-string而不用{}。