巴西电话号码的 JavaScript 掩码答案

【问题标题】：JavaScript mask for Brasil phone number巴西电话号码的 JavaScript 掩码
【发布时间】：2013-02-13 12:20:31
【问题描述】：

目前我将 jquery.maskedinput 用于各种掩码格式，但它不适用于电话号码。

在巴西，我们过去的所有数字都采用 (99)9999-9999 格式。但最近，在少数城市，手机使用的是 (99)99999-9999，而普通手机和全国其他地区的手机使用的是 (99)9999-9999。

jquery.maskedinput 似乎不支持同一输入上的 2 种格式，其中字符串中间的字符可能存在也可能不存在。正如我在其文档中看到的那样，我可以拥有 (99)9999-9999 和 (99)9999-99999，但这会让用户感到困惑。

是否有任何其他掩码插件/框架可以让我同时验证 (99)9999-9999 和 (99)99999-9999？

编辑：我使用 harry 和 Dmitrii 解决方案创建了一个完整的测试：http://jsfiddle.net/NSd6g/$('#full').inputmask('(99)9999[9]-9999');

我会再等一会儿，看看能否找到更好的解决方案。完美的不需要红色消息，第二组默认为 4 位。并且，如果第三组将获得第五个数字，那么只有第二组将获得其第五个空格，将第三组的第一个数字移动到第二组的第五个数字。大声笑有点难以理解，对不起！

【问题讨论】：

标签： javascript jquery validation maskedinput

【解决方案1】：

您可以使用jquery.inputmask 来实现这一点，如下所示：

jQuery(function($) {
    $('#test').inputmask('(99)9999[9]-9999');
});

试试这个demo。

要在输入时跳过可选部分，您需要在掩码中的可选部分后面输入空格或字符（在本例中为连字符）。

【讨论】：

你的面具不适合我。我无法跳过第五个，当我输入第三组的第一个数字时，它会转到第二组的第五个。如果第二组的第一个数字可以是“数字或空格”，它可以工作。
成功了，哈哈！如果要使用 4 个数字，我需要添加注释来解释键入空格：P
对不起，忘了说这个：）

【解决方案2】：

我也是巴西人。

在我的工作中，我们实际上并没有使用中间的“-”字符来表示这些类型的掩码，所以没有混淆......最终的掩码如下：(99)99999999?9

对于最终用户来说，以这种方式识别错误输入的电话号码有点困难，但它确实有效。

我知道的另一种方法是在 JS 中构建正则表达式，然后将其与另一个插件一起使用，例如 jQuery Validate。

【讨论】：

大声笑是的，可以做到，但是 8 或 9 位数字加在一起很难阅读，而且确实很容易打错。您能否提供一个适用于 validate 的正则表达式？

【解决方案3】：

使用 jQuery 掩码，您只能让尾随字符是可选的。不是输入中间的。

我的建议是有 3 个输入框，一个用于数字的每个部分，中间输入末尾带有可选字符。然后在提交时连接输入。

像这样：

 (<input id="phone2" />)<input id="phone3" />-<input id="phone4" />

jQuery(function($){
  $("#phone2").mask("99");
  $("#phone3").mask("9999?9");
  $("#phone4").mask("9999");
});

见小提琴：http://jsfiddle.net/Rge83/1/

为了使其更加用户友好，可以添加一个脚本，以便在当前输入被填充后移至下一个输入 + 一些 css 以使输入看起来更像一个。

【讨论】：

好主意，我用它做了一些测试：jsfiddle.net/6NXWW 但我真的想要一个面具来保持它们在一起

【解决方案4】：

我的建议：“(99) [9] 9999-9999”

【讨论】：

至少对我来说它更自然，如果你想输入一个有 8 个数字的数字，只需在第一个数字中打一个空格就可以了......从美学上来说也更好......（ 11) 9 1234-5678 或 (11) 1234-5678 至少对我来说...

【解决方案5】：

//Configuração para celular com nono digito
$('#Seletor').focusout(function () {
    var phone, element;
    element = $(this);
    element.unmask();
    phone = element.val().replace(/\D/g, '');
    if (phone.length > 10) {
        element.mask("(99) 99999-999?9");
    } else {
        element.mask("(99) 9999-9999?9");
    }
}).trigger('focusout');

【讨论】：