jQuery Mask plugin multiple masks for phone number on the same element doesn't work

Question

I am using the jQuery Mask plugin and I used it before tons of times but now I have to do it for production release, I can't seem to mask a phone number input correctly, I can input (11) 1111-1111 without problem but it doesn't let me add another number, if I did add another number it should change the mask to (11) 1 1111-1111 . That is the same example found on every website (including this one).

 $().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

The primary issue here is that you are attempting to detect the length of the string, however when you switch masks you are introducing two additional characters '0 ' , which is throwing off the number of characters to use.

You might consider ignoring non-digit characters which would give you a better idea of which mask to use such that the masks wouldn't interfere with your count using an example like the following:

 $().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" />