jQuery Masked插件的问题

时间:2013-05-13 18:07:43

标签: javascript jquery maskedinput

这是我带掩码的字段:

$('#Cellphone').mask("(99)9999-9999?9", { placeholder: " " });
  1. 我想在输入失去焦点时清除遮罩。有办法吗?像插件的选项......

    $('#Cellphone').mask("(99)9999-9999?9", { 
        placeholder: " ", 
        clearOnLostFocus: true 
    });
    

    或进入模糊功能:

    $('#Cellphone').blur(function() {
        // clear the mask here.
    });
    
  2. 我想动态更改我的面具。我正在使用这个功能,效果很好......

    $('#Cellphone').keyup(function () {
        var newValue = $(this).val()
            .replace("(", "")
            .replace(")", "")
            .replace(" ", "")
            .replace("-", "")
            .replace("?", "");
    
        if (newValue.length > 10) {
            $(this).mask("(99)9-9999-9999", { placeholder: " " });
        }
    });
    

    ...当我按退格键选择此字段的内容时,我的面具停止工作。知道为什么会这样吗?

  3. 谢谢你们,伙计们!

1 个答案:

答案 0 :(得分:2)

当您未正确填充蒙版时,clearOnLostFocus选项有效。即如果你有输入所有数字,然后保留输入,它将清除它。

$('#cellphone').mask("(99)9999-9999?9", { placeholder: " ", clearOnLostFocus: true });

如果您希望当字段内的数字与掩码匹配时失去焦点甚至时输入字段为空白,则需要使用blur事件。在事件回调中,清空该字段,然后重新应用输入掩码:

$("#cellphone").blur(function() {
   $(this).val(""); 
   $(this).mask("(99)9999-9999?9", { placeholder: " " });
});

退格或删除导致问题的原因是因为插件试图将新掩码应用于不正确的文本行。因此,在您的键盘功能中,您需要检查新掩码是否到位(输入字段的长度是15)以及按下的键是退格键(代码= 8)还是删除键(代码= 46)。如果是这样,那么你需要重新申请旧面具。

$('#cellphone').keyup(function (event) {
    if ($(this).val().length > 14 && ((event.keyCode == 8)||(event.keyCode == 46))) {
        $(this).mask("(99)9999-9999?9", { placeholder: " " });
    } else {
            var newValue = $(this).val()
                .replace("(", "")
                .replace(")", "")
                .replace(" ", "")
                .replace("-", "")
                .replace("?", "");

            if (newValue.length > 10) {
                $(this).mask("(99)9-9999-9999", { placeholder: " " });
            }
    }
});

JSFiddle here以上所有内容。