How do I format my input field using replace regex with javascript and jQuery?

Question

I want to format my <input id="phone_number" type="tel" name="phone_number" maxlength="14"> to have a value like this (123) 456-7890

My current jQuery code:

jQuery("#phone_number").on("keypress", function(event) {
    var phoneReg = /[0-9]/g;
    var phoneKey = String.fromCharCode(event.keyCode);
    if(!phoneReg.test(phoneKey)){
        // dont display characters
        return false;
    } else {
        // display numbers only
        var phoneNumberVal = jQuery("#phone_number").val();
        var phoneNumberUsFormat = phoneNumberVal.replace(/(\d{3})(\d{3})(\d{2})/,"($1) $2-$3");
        jQuery("#phone_number").val(phoneNumberUsFormat);
    }
});

The code above can format a phone number like this: (123) 456-7890 only after typing all the numbers.

What I want to happen is start adding a parentheses and a dash when the user reaches the 3rd and 6th digit

What I currently tried is this:

jQuery("#phone_number").on("keypress", function(event) {
    var phoneReg = /[0-9]/g;
    var phoneKey = String.fromCharCode(event.keyCode);
    if(!phoneReg.test(phoneKey)){
        // dont display characters
        return false;
    } else {
        // display numbers only
        if(phoneNumberVal.length < 4) {
            newNumber  = phoneNumberVal.replace(/(\d{3})/,"($1) ");
            jQuery("#phone_number").val(newNumber);
        }
    }
});

The problem with the updated code above is not being able to detect the 6th digit then automatically add a -

Any help is greatly appreciated. Thanks

tags updated...

Adrian
– Adrian

2019-06-11 13:40:15 +00:00
Commented Jun 11, 2019 at 13:40 — Adrian
– Adrian, Commented Jun 11, 2019 at 13:40

Kévin Bibollet · Accepted Answer · 2019-06-11 14:44:57Z

I suggest you to follow that process:

If the current input's value is not corresponding to the (XXX) XXX-XXXX format, checks the number of digits only.
- If more or exactly 6 (= XXXXXX...), converts to (XXX) XXX- plus the rest if present.
- Else if bewteen 3 and 6 (= XXX...), converts to (XXX) plus the rest if present (note the last space in the format I wrote).
- Then updates the input's value.
Else if the displayed format is right, just avoid the possibility to type more characters.

The code snippet below (with some bonuses):

$('#telephone').on('keyup', function(e) {
  // If not removing a character...
  // (Without that check, you'll not be able to remove characters correctly.)
  if (e.key !== 'Backspace') {
    let value = $(this).val();
  
    // If the value is not corresponding to wanted format...
    if (!/\(\d{3}\) \d{3}-\d{4}/.test(value)) {
      // Only keeps digits.
      value = value.replace(/[^\d]/g, '');

      // If we have at least 6 digits, converts the value to "(XXX) XXX-...".
      if (value.length >= 6) {
        value = `(${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(6)}`;
      }
      // If we have at least 3 digits (but less than 6), converts the value to "(XXX) ...".
      else if (value.length >= 3) {
        value = `(${value.substring(0, 3)}) ${value.substring(3)}`;
      }

      // Updates the input's value.
      $(this).val(value);
    }
    // If the format is correct, just avoid to have too much characters.
    else {
      $(this).val(value.substring(0, 14));
    }
  }
});

// Doesn't display unwanted characters.
// (Did this on a different event. Try replacing "input" by "keyup" to see why.)
$('#telephone').on('input', function() {$(this).val($(this).val().replace(/[^\d() -]/g, ''));});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="telephone">

shrys · Accepted Answer · 2019-06-11 14:06:35Z

1

Try something like this after the 6th character?

$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d)+$/, "($1)$2-$3"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input name="phone" maxlength="14" />

answered Jun 11, 2019 at 14:06

shrys

5,9682 gold badges26 silver badges38 bronze badges

2 Comments

Adrian Over a year ago

Hi. The answer that I am looking for is to start adding a parenthesis on the 3rd digit then add a - on the 6th digit

shrys Over a year ago

Hey @ConanCarroll, I think Kévin's solution answers your question appropriately.

Collectives™ on Stack Overflow

How do I format my input field using replace regex with javascript and jQuery?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related