0

I would like to make an HTML text input field that formats a phone number as the user is typing it. For instance, when you type the phone number into the input field, for example 0213858954555, the input field would automatically format the phone number to (021) 385-86111111

Here's my current code:

<div class="form_row clearfix custom_fileds  owner_name">
        <div class="col-sm-4">
          <label class=r_lbl>Mobile numbers :
            <!--<span class="required">*</span>-->
          </label>
        </div>
        <div class="col-sm-8">
          <input name="mobile_no" id="mobile_no" value="" type="text" class="textfield " placeholder=" "/>

      </div>
  </div>
Anthony L
  • 2,159
  • 13
  • 25
  • 1
    Possible duplicate of [How to implement an input with a mask](https://stackoverflow.com/questions/12578507/how-to-implement-an-input-with-a-mask) – Spencer Wieczorek Feb 22 '18 at 04:29

1 Answers1

3

$(":input").inputmask();

$("#phone").inputmask({"mask": "(999) 999-9999"});
<div class="form_row clearfix custom_fileds  owner_name">
        <div class="col-sm-4">
          <label class=r_lbl>Mobile numbers :
            <!--<span class="required">*</span>-->
          </label>
        </div>
        <div class="col-sm-8">
          <input name="mobile_no" id="phone" value="" type="text" class="textfield " placeholder=" "/>

      </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>

Hope it help's you

Rahul Mahadik
  • 11,668
  • 6
  • 41
  • 54
  • Thanks for sending the code but on my website the code doesn't work do you know why? –  Feb 22 '18 at 05:31
  • @ArnavNath where you integrating this code. Please check both js files included correctly and js code in `` tag – Rahul Mahadik Feb 22 '18 at 05:34
  • Please notice that there are two js files included, and they are from the internet. So, if your server is not able to visit the internet, the code may not work in your server. – Vincent Zhang Feb 22 '18 at 05:47
  • Yes, But he can download it and place it into project workplace instead CDN. BTW, @ArnavNath saying his using for his website – Rahul Mahadik Feb 22 '18 at 05:51
  • @rahulMahadik can u pls send me the version of jquery you are using or does it not matter –  Feb 22 '18 at 08:51
  • @ArnavNath in above example `2.1.1` used but you can use latest version `3.3.1` also – Rahul Mahadik Feb 22 '18 at 08:53
  • @RahulMahadik It still doesn't work but the thing I'm getting confused about is that when I try it on a blank page it works when I try it on my production page it doesn't work –  Feb 24 '18 at 01:05
  • Dude download it and add in your project directory. – Rahul Mahadik Feb 24 '18 at 13:57