Auto Format Phone Number in Jquery

Question

I have one textbox for phone number. My phone number should be XXX-XXX-XXX like this format.

I got the solution for XXX-XXX-XXX format, but i don\'t know how to modi

Answer 1

For the formatting XXX-XXX-XXXX here is a simple solution:

if(this.value.trim().length <= 8){
    this.value = this.value.replace(/(\d{3})\-?/g,'$1-');
 }

Here is an example and you not need any framework or library or npm:

this.phone.addEventListener('keyup', event => {

        if(this.phone.value.trim().length <= 8){
            this.phone.value = this.phone.value.replace(/(\d{3})\-?/g,'$1-');
        }
    }

You could also do this if you like:

 this.phone.addEventListener('keyup', event => {

        if(this.phone.value.trim().length <= 8){
            this.phone.value = this.phone.value.replace(/(\d{3})\-?/g,'$1-');
        }else{
            this.phone.value = this.phone.value.replace(/(\d{4})\-?/g,'$1');
        }
    }

Replace this this.phone with your value. I hope this helps.

Answer 2

As far as I can work out, all you really need to do is this:

$('#ssn').keyup(function()
{
    this.value = this.value.replace(/(\d{3})\-?/g,'$1-');
});

but this will only work when people enter digits, so I'd suggest an introducing an extra check:

$('#ssn').keyup(function(e) {
  if ((e.keyCode > 47 && e.keyCode < 58) || (e.keyCode < 106 && e.keyCode > 95)) {
    this.value = this.value.replace(/(\d{3})\-?/g, '$1-');
    return true;
  }
  
  //remove all chars, except dash and digits
  this.value = this.value.replace(/[^\-0-9]/g, '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="ssn">

A little more on the regex /(\d{3})\-?/g:
This replaces group of 3 digits with itself, followed by a dash. The brackets create a back reference to the matched digits, that is used in the replacement string ($1- -> $1 being the back reference).
Note that an optional dash is replaced, too, but not included in the back reference. if the input is 123, and the replace pattern would be something like /(\d{3})/g, or /(\d{3}\-?)/g the value would become 123-4, 123--45, 123---456 and so on, doubling the dashes each time.

Warning:
This will give the user some grief, since the arrow keys and such won't work.Luckily, that's an easy fix: Just add the following code at the top of your function:

if (e.keyCode > 36 && e.keyCode < 41)
{
    return true;
}

And the arrows work just fine. for other keys (such as delete, backspace, shift etc...) check this page.

For a full example: here's the fiddle

Answer 3

Since you're using jQuery you can try jquery masked-input-plugin.

There's a jsFiddle for you here where you can see how it works.

The source code for the project on GitHub can be found here.

The implementation is more than simple:

HTML:

<input id="ssn"/>

javascript:

$("#ssn").mask("999-999-999");

UPDATE:

Another good one can be found here.

Answer 4

$('#ssn').keyup(function() {
        var val = this.value.replace(/\D/g, '');
        var newVal = '';
        for(i=0;i<2;i++){
         if (val.length > 3) {
          newVal += val.substr(0, 3) + '-';
          val = val.substr(3);
        }
        }
        newVal += val;
        this.value = newVal;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ssn" maxlength="10"/>

Answer 5

I found this question while googling for a way to auto-format phone numbers in Javascript. The accepted answer was not ideal for my needs and a lot has happened in the 6 years since it was originally posted. I eventually found the solution and am documenting it here for posterity.

Problem

I would like my phone number html input field to auto-format (mask) the value as the user types.

Solution

Check out Cleave.js. It is a very powerful/flexible and easy way to solve this problem, and many other data masking issues.

Formatting a phone number is as easy as:

var cleave = new Cleave('.input-element', {
    phone: true,
    phoneRegionCode: 'US'
});

Answer 6

You can set input mask on any field in 3 simple steps:

1: First of all call these libraries http://code.jquery.com/jquery-1.7.2.min.js" "https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"

2: Create simple form like this :

<form> <input type="text" name="phone" id="phone" /> </form>

3: Then the script code past into your script tag..

$(document).ready(function($) {

$('#phone').mask("99999-9999999-9",{placeholder:""});

});