jquery - 如何在输入字段上按需执行多个掩码

Question

我尝试使用 jquery mask plugin 对输入执行掩码，我需要做的是执行两个不同的掩码:

US###-###-###-###-###-### 如果用户首先尝试输入一些数字，则必须应用此掩码。 (这里我的意思是通过#输入数字)

但是如果用户决定一开始不输入任何数字，我想让他在之后输入任何类型的字母或 unicod 字符或数字(完全任何字符)

我应该如何执行这样的掩码？

Answer 1

一种可能的解决方案可能是使用the jQuery Mask Plugin's doc中所谓的解决方案。通过即时掩码更改，如下所示:

HTML:

<input type="text" class="US" maxlength="20" autocomplete="off"/>

jQuery:

$(document).ready(function(){
    var options =  {onKeyPress: function(us){
        var masks = ['CAAAA-AAA-AAA-AAA-AAA-AAA', 'US000-000-000-000-000-000'];
        if(us.length){
            mask = (us[0].match(/\d/)) ? masks[1] : masks[0];
            $('.US').mask(mask, this);
        }
        $('.US').mask('AAAAA-AAA-AAA-AAA-AAA-AAA', this);
    }};

    $('.US').mask('AAAAA-AAA-AAA-AAA-AAA-AAA', options);
});

<小时/>

说明:

您的输入遇到的问题是它使用了字符 S。尽管如此，S 在插件中已经具有不同的含义。根据默认掩码图例:

S: Only A-Z and a-z characters.

因此，您有两个选项可以解决此问题:使用翻译模式，或覆盖“jquery.mask.js”中的默认选项:

var custom_options = {
  byPassKeys: [8, 9, 37, 38, 39, 40],
  translation: {
                '0': {pattern: /\d/}, 
                '9': {pattern: /\d/, optional: true}, 
                '#': {pattern: /\d/, recursive: true}, 
                'A': {pattern: /[a-zA-Z0-9]/}, 
                'S': {pattern: /[a-zA-Z]/}
            };
};

我选第二个!我将“S”更改为“C”。它可能是另一个角色。

检查此链接 jsfiddle查看工作示例。

希望有用!