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" />