巴西电话号码的JavaScript掩码

JavaScript mask for Brasil phone number

本文关键字：掩码 JavaScript 电话号码 巴西      更新时间：2023-09-26

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

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

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

是否有其他掩码插件/框架允许我验证（99）9999-9999和（99）9999-9999？

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

我会再等一段时间，看看是否能找到更好的解决方案。完美的一组不需要红色信息，第二组默认为4位数字。而且，如果第三组得到第五个数字，只有第二组才能得到第五空间，将第三组的第一个数字移动到第二组的第五个。哈哈，有点难以理解，对不起！

使用jquery.inputmask可以实现这一点，简单如下：

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

试试这个演示。

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

我也是巴西人。

在我的工作中，我们实际上并没有在这些类型的面具中间使用"-"字符，所以没有混淆。。。最后的掩码如下：(99)99999999?9

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

我知道的另一种方法是在JS中构建regex，然后将其与另一个插件一起使用，例如jQueryValidate。

使用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，使输入看起来更像一个。

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

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

10年后的一些更新：

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

因此，为了有一个既能接受移动电话又能接受固定电话的字段，我更喜欢一个将自动调整为"0"的动态掩码；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");
});

现在。。。

$(selector).inputmask({ mask: ['(99) 9999-9999', '(99) 99999-9999'], keepStatic: true });

数组项的顺序很重要。

相关文章：