Custom Phone Number input

by Shubham Agrawal

HTML

<form>
  <input type="text" id="phoneNumber" value="" required>
  <input type="submit" value="Submit">
</form>

JavaScript

var cnt = 0;
$("#phoneNumber").focus(function() {
  if ($(this).val() == "")
    $(this).val("(___) ___-____");
});
$('#phoneNumber').keydown(function(event) {
  if ((event.which >= 48 && event.which <= 57 && cnt < 10) || (event.which == 8)) {
    ccc = [1, 2, 3, 6, 7, 8, 10, 11, 12, 13];
    var vl = $("#phoneNumber").val();
    var res = vl.split("");
    if (event.which == 8) {
      cnt--;
      res[ccc[cnt]] = "_";
    } else {
      res[ccc[cnt]] = String.fromCharCode(event.which);
      cnt++;
    }
    var myVar = "";
    for (var i = 0; i < res.length; i++) {
      myVar += res[i];
    }
    $('#phoneNumber').val(myVar);
  }
  event.preventDefault();
});