Auto filling parentheses and hyphen for phone number input jquery

Question

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>

Answer 1

If you started to use regexp, why dont you go whole way through. Below the code that filter input value and convert it to your look.

Beware, this code only for value that contains only digits. You could block any other types via plugins or your own code. (jquery.numeric plugin is a good choice)

jquery

$(document).on('change', '.js-phone-number', function() {
  var
    $this = $(this),
    number = $this.val();

  number = number.replace(/(\d{3})(\d{3})(\d{4})/, '($1)-$2-$3');
  $this.val(number);
});

Answer 2

Regular expressions are your friend.

var ok = phNum.search(/^\(?\d{3}\D*\d{3}\D*\d{4}$/);
if (ok==0) {
  var parts = phNum.match(/^\(?(\d{3})\D*(\d{3})\D*(\d{4})$/);
  output.value='('+parts[1]+') '+parts[2]+'-'+parts[3];
}

Accepts: 404-555-1234, 4045551234, (404) 555-1234, etc. Returns: (404) 555-1234

Answer 3

When you're getting the pre code from the number, you're trying to get the index of 4, instead of four digits. So change that, and it should start working:

var pre = input.substr(3, 3);

If you don't want the dynamic filling, the other posted answers might be useful.

Answer 4

You are fetching variable pre as substring of length 4 and then checking it for it is less than or equal to 3. So, basically your last else if block will never be true.

Change var pre = input.substr(3,3);

Your code will work fine.

Answer 5

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" />