Accepting two separate phone number formats with jQuery MaskedInput plugin

Question

I have the following rules for phone number data entry:

For USA phones, it must follow format (999) 999-9999
For non-USA phones, it must start with a + followed by any combination of digits, hyphens, and spaces (basically, much less strict than the USA format)

I have regex validation that ensures that the entered phone number matches these rules. I want to use a phone format mask that follows the above rules.

For example, the simple case of just allowing the specific USA format, I can do:

<label for="phone">Enter Phone Number:</label>
<input type="text" id="phone" name="phone">

<script type="text/javascript">
    $(function () {
        $('.usa-phone').mask("(999) 999-9999");
    });
</script>

This would display something like this in the textbox when the user clicks to focus the phone textbox:

(___) ___-____

But how do I then allow for international phones that start with "+" sign in the same input field?

For example +99 (99) 9999-9999.

Check this may help anything https://github.com/andr-04/inputmask-multi — vijaykumar, Dec 29 '16 at 06:53
jQuery MaskedInput plugin don't support this feature, you have to use other plugin instead — Chiu, Jan 05 '17 at 02:33

score 3 · Answer 1 · answered Jan 04 '17 at 05:27

You could add a button that swaps between the two masks. For instance:

$(document).ready(function() {
  $("#phone").inputmask("mask", {
    "mask": "(999)999-999"
  });
  var i = 0;
  $('.plus-button').click(function() {
    if (i === 0) {
      $("#phone").inputmask("mask", {
        "mask": "+99 (99) 9999-9999"
      });
      i = 1;
    } else {
      $("#phone").inputmask("mask", {
        "mask": "(999)999-999"
      });
      i = 0;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<label for="phone">Enter Phone Number:
  <button type="button" class="plus-button">+</button>
</label>
<input type="text" id="phone" name="phone" data-mask>

This is similar to the route I ended up taking. I setup an "international" checkbox, which, if checked, swaps the masks. Seemed like a reasonable enough way to do it. — Jiveman, Jan 04 '17 at 15:28

score 1 · Answer 2 · edited May 23 '17 at 12:33

There are several solutions to this, including having the user picking from a drop-down-list as to which country they are in, so you can setup the format accordingly. A second way would be to intercept the users individual keystrokes and then change the format as you se +44 or +39 to represent the UK or Italian number format.

There are several packages out there that implements it, and since there are 100's of countries many with more than one or two format in each country, you probably should not try to implement this yourself,but instead use one of those packages

I think I have used this one here: https://github.com/albeebe/phoneformat.js in an earlier project.

Since you are looking for a Jquery solution, the stripe library looks promising https://github.com/stripe/jquery.mobilePhoneNumber

If you are OK building a bit of code yourself you may be able to combine the keyboard processing explained here How to change Phone number format in input as you type? with the core code from either of the other libs

So, to grossly over-simplify the logic, you would dynamically change the format of the filed based on inputs in a keyup event, like

$("#phone").keyup(function(x){
   var plus = $(x.target).val();
   if (plus[0] == '+')
        $(x.target).mask("\+99 9999999999")
   else
        $(x.target).mask("999 999-9999")  
})

Thank you for the help. This didn't quite answer my question, but it help set me in the right direction. The code sample you provided was helpful, but doesn't quite work. If the mask(...) function is repeatedly executed on each keyup it seems it doesn't allow for normal input of all digits, just the first one, because the mask is repeatedly being reset. — Jiveman, Jan 02 '17 at 20:45

score 0 · Answer 3 · answered Jan 03 '17 at 11:06

You can use the below mask option to achieve what you have mentioned i.e +99 (99) 9999-9999 data-inputmask="'mask': ['+99 (99) 9999-9999']"

You can use the above option along with your input element. I have created a fiddle for this.

JS Fiddle Link:https://jsfiddle.net/5yh8q6xn/1/

HTML Code:

<div class="form-group">
    <label>Intl US phone mask:</label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="fa fa-phone"></i>
        </div>
        <input id="intl" type="text" class="form-control" data-inputmask="'mask': ['+99 (99) 9999-9999']" data-mask>
        <!--'999-999-9999 [x99999]',   -->
    </div>
    <!-- /.input group -->
</div>

JS Code:

$(function(){
 $("[data-mask]").inputmask(); 
});

Other Options You can also append 0 in the input mask as some users prefer prefixing 0 in the contact number along with + For appending 0 along with your number, just replace the below in input element.

data-inputmask="'mask': ['+099 (99) 9999-9999']"

Similarly, for different inputs(of different countries), you can mask your input accordingly.

I hope this is what you were looking for!

Not sure I follow. How does this allow input of two separate formats? One being `(123) 456-7890` and another one being `+` followed by whatever non-US number? — Jiveman, Jan 04 '17 at 00:32
You can have two input fields; one which accepts US format & other for international numbers. Are you looking to have the input masked using a single input field? — Jestino Sam, Jan 04 '17 at 06:06

Accepting two separate phone number formats with jQuery MaskedInput plugin

3 Answers3