jQuery Mask 插件同一元素上电话号码的多个掩码不起作用

Question

我正在使用 jQuery Mask 插件，我之前使用过它很多次，但现在我必须在生产版本中使用它，我似乎无法正确屏蔽电话号码输入，我可以输入 (11 ) 1111-1111 没有问题，但它不允许我添加另一个号码，如果我添加另一个号码，它应该将掩码更改为 (11) 1 1111-1111。这是在每个网站(包括这个网站)上找到的相同示例。

$().ready(() => {
  var moptions = {
    placeholder: "(__) ____-____",
    onKeyPress: function(cep, e, field, options) {
      var masks = ["(00) 0000-0000", "(00) 0 0000-0000"];
      var mask = cep.length > 14 ? masks[1] : masks[0];
      $(".phone").mask(mask, options);
    }
  };

  $(".phone").mask("(00) 0000-0000", moptions);
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<input type="text" class="phone"/>

Answer 1

这里的主要问题是您试图检测字符串的长度，但是当您切换掩码时，您会引入两个额外的字符 '0 '，这会导致字符数丢失使用。

您可以考虑忽略非数字字符，这可以让您更好地了解要使用哪个掩码，这样掩码就不会干扰您的计数，使用如下示例:

$().ready(() => {
  var maskOptions = {
    placeholder: "(__) ____-____",
    onKeyPress: function(cep, e, field, options) {
      // Use an optional digit (9) at the end to trigger the change
      var masks = ["(00) 0000-00009", "(00) 0 0000-0000"],
        digits = cep.replace(/[^0-9]/g, "").length,
        // When you receive a value for the optional parameter, then you need to swap
        // to the new format
        mask = digits <= 10 ? masks[0] : masks[1];

      $(".phone").mask(mask, options);
    }
  };

  $(".phone").mask("(00) 0000-0000", maskOptions);
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<input type="text" class="phone" />