CODEWITHSUNDEEP
javascriptjquery
Senthil Sivaramakrishnan
Senthil Sivaramakrishnan

Reputation: 361

Auto Format Phone Number in Jquery

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 modify that code.

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

http://jsfiddle.net/ssthil/nY2QT/

Upvotes: 12

Views: 70981

Answers (6)

The Devout Programmer
The Devout Programmer

Reputation: 31

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.

Upvotes: 2

Tod Birdsall
Tod Birdsall

Reputation: 19015

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

Upvotes: 0

Rahul Vij
Rahul Vij

Reputation: 1

$('#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"/>

Upvotes: -1

Musharib Khan
Musharib Khan

Reputation: 1

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

});

Upvotes: -2

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76395

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

Upvotes: 7

LeftyX
LeftyX

Reputation: 35587

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.

Upvotes: 29

Related Questions