CODEWITHSUNDEEP
javascriptjqueryhtml
serene
serene

Reputation: 1646

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

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

Upvotes: 5

Views: 18531

Answers (5)

Slawomir Dziuba
Slawomir Dziuba

Reputation: 1325

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>

Upvotes: -1

FZs
FZs

Reputation: 18619

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

Upvotes: 7

Akashdeep Singh
Akashdeep Singh

Reputation: 23

<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

Upvotes: 0

Pr0mis PAtel
Pr0mis PAtel

Reputation: 350

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

Upvotes: 1

ArunKumar M N
ArunKumar M N

Reputation: 1266

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>

Upvotes: 5

Related Questions