Auto filling parentheses and hyphen for phone number input jquery

javascript, jquery, phone-number

Solution

I realize this post is older but i found it quite useful and made some minor modifications to enhance it for all telephone fields and to allow for deleting characters if the user makes a mistake.

$("input[type='tel']").each(function(){
  $(this).on("change keyup paste", function (e) {
    var output,
      $this = $(this),
      input = $this.val();

    if(e.keyCode != 8) {
      input = input.replace(/[^0-9]/g, '');
      var area = input.substr(0, 3);
      var pre = input.substr(3, 3);
      var tel = input.substr(6, 4);
      if (area.length < 3) {
        output = "(" + area;
      } else if (area.length == 3 && pre.length < 3) {
        output = "(" + area + ")" + " " + pre;
      } else if (area.length == 3 && pre.length == 3) {
        output = "(" + area + ")" + " " + pre + "-" + tel;
      }
      $this.val(output);
    }
  });
});

<input type="tel" placeholder="(XXX) XXX-XXXX" />

Problem

I want to have a user's input auto fill the punctuation of a phone number to look like this (xxx) xxx-xxxx. I have written an example jfiddle here but it breaks when filling in the last 4 digits of the phone number. ``` $("#phone").on("change keyup paste", function () { var output; var input = $("#phone").val(); input = input.replace(/[^0-9]/g, ''); var area = input.substr(0, 3); var pre = input.substr(3, 4); var tel = input.substr(6, 4); if (area.length < 3) { output = "(" + area; } else if (area.length == 3 && pre.length < 3) { output = "(" + area + ")" + " " + pre; } else if (area.length == 3 && pre.length == 3) { output = "(" + area + ")" + " " + pre + "-" + tel; } $("#phone").val(output); }); HTMl: <input id='phone'></input> ```

Original source