javascript - jQuery Masked 插件的问题

Question

这是我带面具的领域：

$('#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: " " });
       }
   });
   

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

感谢你们！

Answer 1

clearOnLostFocus当您没有正确填充遮罩时，该选项有效。即，如果您没有输入所有数字，则留下输入，它将清除它。

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

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

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

退格或删除导致问题的原因是插件试图将新掩码应用于不正确的文本行。因此，在您的 keyup 函数中，您需要检查新掩码是否到位（输入字段的长度为 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与以上所有内容。