JavaScript 巴西电话号码面具

Question

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

在巴西，我们过去的所有数字都采用 (99)9999-9999 格式。 但最近，在一些城市，手机使用的是（99）99999-9999，而他们的普通电话和国家的rest仍然是（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 位数字。 并且，如果第三组获得第五位数字，则只有第二组才能获得第五位，将第三组的第一位数字移至第二组的第五位数字。 大声笑有点难以理解，对不起！

Answer 1

您可以使用jquery.inputmask达到以下目的 ：

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

试试这个演示 。

要在输入中跳过可选部分，您需要在掩码中的可选部分（在这种情况下为连字符）后面键入空格或字符。

Answer 2

使用jQuery mask，您只能使结尾字符为可选。 输入的中间不是一个。

我的建议是有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以使输入看起来更像一个输入。

Answer 3

我也是巴西人

在我的工作中，对于这些类型的蒙版，我们实际上并不在中间使用“-”字符，因此不会造成混乱……最终的蒙版如下： (99)99999999?9

这样，最终用户很难识别出错误键入的电话号码，但是它可以工作。

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

Answer 4

我的建议：“（（99）[9] 9999-9999”

Answer 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');

Answer 6

10年后的一些更新：

• jQuery 还活着（是的！）
• 巴西的所有手机现在都有 9 位数字（除了来自区号的 2 位数字）
• 所有巴西固定电话仍然有 8 位数字（区号除外）

因此，为了让一个字段同时接受手机或固定电话，我更喜欢动态掩码，它会根据键入的数字自动将自身调整为“5+4”或“4+4” 。

例子：

$('#ContactPhone')
  // by default we expect a mobile (5+4 digits)
  // so the initial mask splits 5+4 and if someone pastes 9 digits 
  // the separator position won't be changed causing a blip

  .inputmask('(99) 99999-999[9]')
  .on('change keyup paste', function () {
    var digits = $(this).val().replace(/\D/g, '').length;

    // ... if there are only 8 digits we reformat as 4+4 - 
    // but yet letting space for another digit (which would reformat the mask back to 5+4)
    if (digits == 10)
      $(this).inputmask('(99) 9999-9999[9]');
    else
      $(this).inputmask("(99) 99999-9999");
});