jquery - JavaScript mask for Brasil phone number - Stack Overflow

admin管理员组

文章数量:1276748

Currently I'm using jquery.maskedinput for verious mask formats, but it's not working for phone numbers.

In Brasil we used to have all numbers in the format (99)9999-9999. But lately, in a few cities, cell phones are using (99)99999-9999, while their normal phones and the rest of the country remain (99)9999-9999.

jquery.maskedinput seems to not support 2 formats on the same input where a character in the middle of the string may or may not be present. As I can see in its documentation, I could have (99)9999-9999 and (99)9999-99999, but that would confuse users.

Is there any other mask plugin/framework that allows me to validate both (99)9999-9999 and (99)99999-9999?

Edit: I created a full test using harry and Dmitrii solutions: / $('#full').inputmask('(99)9999[9]-9999');

I'm gonna wait a bit more to see if I can find an even better solution. The perfect one wouldn't require the red message, second group would have 4 digits by default. And, if third group would get a fifth digit, only then second group would get its fifth space, moving third group's first digit into second group's fifth. lol kinda hard to understand, sorry!

Currently I'm using jquery.maskedinput for verious mask formats, but it's not working for phone numbers.

In Brasil we used to have all numbers in the format (99)9999-9999. But lately, in a few cities, cell phones are using (99)99999-9999, while their normal phones and the rest of the country remain (99)9999-9999.

jquery.maskedinput seems to not support 2 formats on the same input where a character in the middle of the string may or may not be present. As I can see in its documentation, I could have (99)9999-9999 and (99)9999-99999, but that would confuse users.

Is there any other mask plugin/framework that allows me to validate both (99)9999-9999 and (99)99999-9999?

Edit: I created a full test using harry and Dmitrii solutions: http://jsfiddle/NSd6g/ $('#full').inputmask('(99)9999[9]-9999');

I'm gonna wait a bit more to see if I can find an even better solution. The perfect one wouldn't require the red message, second group would have 4 digits by default. And, if third group would get a fifth digit, only then second group would get its fifth space, moving third group's first digit into second group's fifth. lol kinda hard to understand, sorry!

• javascript
• jquery
• validation
• maskedinput

Share Improve this question Follow edited Feb 20, 2013 at 3:45 Hikari asked Feb 13, 2013 at 12:20 HikariHikari 3,9471212 gold badges5252 silver badges8989 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5 +50

You could achieve this using jquery.inputmask as simple as:

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

Try this demo.

To skip the optional part while typing into the input you need to type space or the char following the optional part in the mask (hyphen in this case).

I'm Brazilian too.

At my job we don't actually use the "-" char in the middle for those type of masks, so there's no confusion... the final mask would be the following: (99)99999999?9

It's a bit harder to the final user to identify a wrongly typed phone number this way, but it works.

Another way I know is building the regex in JS and then using it with another plugin, like, for example, jQuery Validate.

With jQuery mask you can only have the trailing characters be optional. Not ones in the middle on the input.

My suggestion would be to have 3 input boxes, one for each part of the number with the optional character at the end of the middle input. Then concatenate the inputs on submit.

like so:

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

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

See fiddle: http://jsfiddle/Rge83/1/

To make it more user friendly, a script to move to the next input once the current one has been filled can be added + some css to make the inputs look more like one.

My suggestion: "(99) [9] 9999-9999"

And now ...

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

Order of array items matters.

//Configuração para celular  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');

Some updates 10 years later:

• jQuery is still alive (yes!)
• all mobiles in Brazil have 9 digits now (besides 2 digits from area code)
• all Brazilian landlines still have 8 digits (besides area code)

So in order to have a field accepting both mobiles or landlines I prefer a dynamic mask that will automatically adjust itself to "5+4" or "4+4" depending on how many digits were typed.

Example:

$('#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");
});

本文标签： jqueryJavaScript mask for Brasil phone numberStack Overflow