jQuery input mask for phone number

Question

I want a user's input to autofill the punctuation of a phone number in order to look like this (xxx) xxx-xxxx. This is my HTML code:

  <div class="form-group">
    <label class="control-label col-sm-2">Phone Number:</label>
    <div class="col-sm-10">          
      <input type="text" class="form-control" name="phoneNumber"
           id="phoneNumber" value="<?php echo $row["phoneNumber"];?>">
    </div>
  </div>

What else do I need to do to complete this task? I am trying to use jQuery and an input mask.

Answer 1

You can accomplish this by using the Input Mask jQuery extension.

$('#phoneNumber').inputmask("(999) 999-9999");

<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 class="control-label col-sm-2">Phone Number:</label>
  <div class="col-sm-10">          
  <input type="text" class="form-control" name="phoneNumber" id="phoneNumber" value="">
</div>

Answer 2

Currently for detecting any kind of phone number around the globe, the phone extension is more appropriate, since it checks already in a preexisting array of masks (no need to define a mask):

let allIns = document.querySelectorAll("input");
Inputmask().mask(allIns);
[...allIns].map(el => el.setAttribute('placeholder', "+#(###)-###-####"));

$('#jqp input').inputmask("phone", {
  placeholder: '#',
  showMaskOnHover: false,
  onKeyValidation: function () {
    let mt = $(this).inputmask("getmetadata");
    $('#jqp span').text(`${mt['cd']} (${mt['cc']})`);
    //console.log(mt);
  }
});

Inputmask.extendAliases({
  my_phone: {
    alias: "abstractphone",
    placeholder: '#',
    phoneCodes: [{
      mask: "+987-####",
      cc: "zz",
      cd: "zzzz",
      desc_en: "Moon!",
      name_ru: "яяя",
      desc_ru: ""
    }, {
      mask: "+789-###",
      cc: "yy",
      cd: "Y-Y",
      desc_en: "Sun!"
    }],
    onKeyValidation: function() {
      let mt = $(this).inputmask("getmetadata");
      $('#jqma span').text(mt['desc_en']).css('color',
      `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`);
      //console.log(mt);
    }
  }
});
$('#jqma input').inputmask("my_phone");

span {color:#37e;font-weight:bold}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/inputmask.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/inputmask.extensions.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/jquery.inputmask.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/phone-codes/phone.js"></script>
<p>
<label>Old simple HTML data + JS:      
<input type="text" data-inputmask="'mask': '+9(999)-999-9999', 'showMaskOnHover': false, 'placeholder': '#'" >
</label>
</p>

<p id="jqp"><label>jQuery phone extension alias: <input/></label> <span/>
</p>
<p id="jqma"><label>jQuery extended phone alias: <input/></label> <span/>
</p>

However, phone.js actually provides us a huge alias, where dynamic access to each item's details/metadata (such as the country) is possible while the user types (type in in the 2^nd input to see it). So you may also create your own phone extension based on this huge array (3^rd input).

This is all the same old Inputmask (which may also be jQuery-free now). Above I just depicted:

1. simply using HTML data- attributes;
2. using directly the phone extension with a slight customization (e.g. changing the placeholder);
3. define a particular set of phone numbers to be validated through the phone extension by just using alias: "abstractphone" when extending.