How to input phone no in this 'xxx-xxx-xxxx' format in number input field

Question

I want that whenever I type a number in the number input field in XXXXXXXXXX format it takes as XXX-XXX-XXXX using HTML, CSS and javascript.

Just like this snippet but without using the mask script.

$('.phone_us').mask('000-000-0000');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<!--mask script-->

<input type="text" class="phone_us" />

Answer 1

There are some working answers here, but this solution is more stable.

• Using the oninput event for instant replace and ...
• Applying regex on the full string, to allow copy/paste, and finally ...
• This code is shorter as well:

$('.phone_us').on('input', function() {              //Using input event for instant effect
  let text=$(this).val()                             //Get the value
  text=text.replace(/\D/g,'')                        //Remove illegal characters 
  if(text.length>3) text=text.replace(/.{3}/,'$&-')  //Add hyphen at pos.4
  if(text.length>7) text=text.replace(/.{7}/,'$&-')  //Add hyphen at pos.8
  $(this).val(text);                                 //Set the new text
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="phone_us" maxlength="12">

Or even without jQuery:

document.querySelector('.phone_us').addEventListener('input', function() { //Using input event for instant effect
  let text=this.value                                                      //Get the value
  text=text.replace(/\D/g,'')                                              //Remove illegal characters
  if(text.length>3) text=text.replace(/.{3}/,'$&-')                        //Add hyphen at pos.4
  if(text.length>7) text=text.replace(/.{7}/,'$&-')                        //Add hyphen at pos.8
  this.value=text;                                                         //Set the new text
});

<input class="phone_us" maxlength="12">

Answer 2

you could try like this

   $(document).ready(function () {

$(".phone_us").keyup(function (e) {
    var value = $(".phone_us").val();
    if (e.key.match(/[0-9]/) == null) {
        value = value.replace(e.key, "");
        $(".phone_us").val(value);
        return;
    }

    if (value.length == 3) {
        $(".phone_us").val(value + "-")
    }
    if (value.length == 7) {
        $(".phone_us").val(value + "-")
    }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<!--mask script-->
 
<form id="form1" runat="server">
        <input type="text" maxlength="12" class="phone_us"/>
    </form>

Answer 3

You can implement like this

  document.getElementById('txtphone').addEventListener('blur', function (e) {
        var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/);
        e.target.value = '(' + x[1] + ') ' + x[2] + '-' + x[3];
    });txtphone

 <input type="text" class="phone_us" id="txtphone" placeholder = "(000) 000-0000"/>