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.

Answer 1

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")  
})

Answer 2

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!

Answer 3

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>