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

user_11632050 0
Viewed 13511

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" />

html jquery javascript
5 Answers

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">

user_83761840

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>

user_57507870

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"/>

user_92432580 
<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

Use HTML5 input type=tel to get phone number, and pattern attribute to specify any pattern.

[0-9]{3} represent the 0-9 numeric and 3 digits.
Then, add a hyphen (-), and use the numerics pattern again.

You can use own pattern and your country wise pattern like [1-9]{4}-[1-9]{6} for the format 1234-567890.

Use the min-length and max-length in HTML5 to set limit.

Note that these patterns won't automatically add the hyphens, but will only allow correctly formatted input.

If you want get more patterns, search on web or see HTML5pattern.com

user_116475010

Pure javascript. Enter 10 digits in the input field and click anywhere outside the input field.

var myTel = document.getElementById("tel");
myTel.addEventListener("blur", function() {
    var str=myTel.value;
    var pattern=/[0-9]{10}/;
    if (pattern.test(str)) {
        newstr=str.slice(0,3)+'-'+str.slice(3,6)+'-'+str.slice(6,10);
        myTel.value=newstr;
    }
    else {
        // bad
        myTel.value='bad value: only 10 digits';
    }
})
<form>
   <input type="text" id="tel" name="tel" maxlength='10'>
</form>

user_111878380
Related