Add dash in auto complete phone number

Question

Question:

Is it possible to automatically add a dash "-" in auto complete?

Let say I have a phone number field and if someone will type their phone number in it the browser auto complete will show.

Ex.

This is the browser auto complete value 1234567890

Once they select that I want to automatically format it to this

123-456-7890

Because there are some site that they dont have a validation format into their phone field you can input 10 digit number continuesly and once you have that in your browser cache it will also display into other phone field.

Thanks in advance.

See [this answer](http://stackoverflow.com/questions/17651207/mask-us-phone-number-string-with-javascript/29335409#29335409) I wrote.. there are two example. No jQuery needed. — Josh Crozier, Jul 11 '15 at 01:20

score 40 · Accepted Answer · answered Jul 11 '15 at 01:34

40

$('#phone-number-field').keyup(function(){
    $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'))
});

answered Jul 11 '15 at 01:34

Shakeeb Ahmad

2,010
1
25
30

Dipak Parmar · Answer 2 · 2018-06-26T16:00:09.913

You can try this code.

$(function () {

    $('#txtnumber').keydown(function (e) {
       var key = e.charCode || e.keyCode || 0;
       $text = $(this); 
       if (key !== 8 && key !== 9) {
           if ($text.val().length === 3) {
               $text.val($text.val() + '-');
           }
           if ($text.val().length === 7) {
               $text.val($text.val() + '-');
           }

       }

       return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
   })
});

HTML input

<input id="txtnumber"   type="text" maxlength="12" placeholder="xxx-xxx-xxxx" />

You can also see in jsfiddle

https://jsfiddle.net/karthikjsf/38vdpj4f/

score 3 · Answer 3 · answered Feb 05 '20 at 07:52

The above answers were fine, but I faced some issue while copy paste that is entry of other character other then number so I used:

  $('#help_number').keyup(function(){
    $(this).val($(this).val().match(/\d+/g).join("").replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'))
  });

Example:

str="34%^gd 5-67 6-6ds897"

str.match(/\d+/g).join("")

output is : >> "3456766897"

str.match(/\d+/g).join("").replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3')

output is : 345-676-6897

Except what happens when they enter one or more non-digits first? — ChiefTwoPencils, Mar 18 '21 at 21:34

Haroon Mirza · Answer 4 · 2022-09-05T20:41:43.403

To include dashes between the numbers, make sure your input type is text.

HTML:

<input type="text" id="phone" maxlength="12" placeholder="xxx-xxx-xxxx" />

SCRIPT:

<script>
    $('#phone').keydown(function (event) {
            
        var length = $(this).val().length;

        if (length == 3 || length == 7) {
            $(this).val($(this).val() + '-');
        }
    })
</script>

But if you face some issues while using some keys like (backspace, hyphen, arrow left or right, Ctrl+C, Ctrl+V, Ctrl+A or refreshing the page with F5 while focused in the input box etc), then use their keyCode values like this:

<script>
    $('#phone').keydown(function (event) {
        // To allow backspace, tab, ctrl+A, ctrl+C, ctrl+V, ctrl+X, Enter, arrow right -> , arrow left <- , dash or hyphen, F5
        if (event.keyCode == 8 ||
            event.keyCode == 9 ||
            event.keyCode == 13 ||
            event.keyCode == 32 ||
            event.keyCode == 37 ||
            event.keyCode == 39 ||
            (event.keyCode == 65 && event.ctrlKey === true) ||
            (event.keyCode == 67 && event.ctrlKey === true) ||
            (event.keyCode == 86 && event.ctrlKey === true) ||
            (event.keyCode == 88 && event.ctrlKey === true) ||
            event.keyCode == 109 ||
            event.keyCode == 189 ||
            event.keyCode == 116) {
                return;
            }
        if ((event.keyCode < 48 || event.keyCode > 57) && 
            (event.keyCode > 105 || event.keyCode < 96)) {
                event.preventDefault();
            }
            
        var length = $(this).val().length;

        if (length == 3 || length == 7) {
            $(this).val($(this).val() + '-');
        }
    })
</script>

Best answer here, works flawlessly in all cases. – Syed M. Sannan Oct 25 '22 at 19:53 — Syed M. Sannan, Oct 25 '22 at 19:53

Add dash in auto complete phone number

4 Answers4

Linked