To mask US phone number

To mask US phone number in (XXX) XXX-XXX format

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<form id="example-form" name="my-form">
  <label>Phone number:</label>
  <br />
  <!-- I used an input type of text here so browsers like Chrome do not display the spin box -->
  <input class="phone" name="phone-number" type="text" maxlength="20" placeholder="(XXX) XXX-XXXX" />
  <br />
  <br />
  <input type="button" value="Submit" />
</form>

JavaScript

$('.phone')

.on('keypress', function(e) {
  var key = e.charCode || e.keyCode || 0;
  var phone = $(this);
  //if (phone.val().length === 0) {
    //phone.val(phone.val() + '(');
  //}
  // Auto-format- do not expose the mask as the user begins to type
  if (key !== 8 && key !== 9) {
    if (phone.val().length === 2) {
      phone.val(phone.val() + '.');
    }
    if (phone.val().length === 6) {
      phone.val(phone.val() + '.');
    }
    if (phone.val().length === 10) {
      phone.val(phone.val() + '.');
    }
    if (phone.val().length === 12) {
      phone.val(phone.val() + '-');
    }
    if (phone.val().length === 16) {
      phone.val(phone.val() + '.000');
    }
    if (phone.val().length >= 16) {
      phone.val(phone.val().slice(0, 20));
    }
  }

  // Allow numeric (and tab, backspace, delete) keys only
  return (key == 8 ||
    key == 9 ||
    key == 46 ||
    (key >= 48 && key <= 57) ||
    (key >= 96 && key <= 105));
})

.on('focus', function() {
  phone = $(this);

  if (phone.val().length === 0) {
    phone.val('');
  } else {
    var val = phone.val();
    phone.val('').val(val); // Ensure cursor remains at the end
  }
})

.on('blur', function() {
  $phone = $(this);

  if ($phone.val() === '(') {
    $phone.val('');
  }
});