CODEWITHSUNDEEP
javascriptjqueryphone-number
Dylan
Dylan

Reputation: 81

Auto filling parentheses and hyphen for phone number input jquery

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>

Upvotes: 8

Views: 14735

Answers (5)

Felix
Felix

Reputation: 541

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.

Upvotes: 3

Zanderi
Zanderi

Reputation: 917

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

Upvotes: 10

Bob Brown
Bob Brown

Reputation: 1502

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

Upvotes: 1

arachnid
arachnid

Reputation: 236

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.

Upvotes: 0

UtherTG
UtherTG

Reputation: 192

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);
});

Upvotes: 0

Related Questions