jquery - How to change Phone number format in input as you type? -

my codepen: http://codepen.io/leongaban/pen/cyaal

i have input field phone number allows 20 characters (for international numbers).

i'm using masked input jquery plugin josh bush format phone number in input make 'pretty'.

• my problem in requirements when phone 10 digits or less, should use masked input formatting.

• however when phone number longer 10 digits, formatting should removed.

---

here current: codepen, cell phone input field i'm trying accomplish this. work phone example of default functionality of mask input plugin.

how go problem?

jquery cell phone input field:

case '2':     console.log('created phone input');     $('.new_option').append(myphone);     $('.added_mobilephone').mask('(999) 999-9999? 9');     $('.added_mobilephone').keypress(function(event){        if (this.value.trim().length > 10) {         console.log('this.value = '+this.value.trim());         console.log('greater 10');         $('.added_mobilephone').mask('99999999999999999999');       }        /*if (this.value.length < 9) {         console.log(this.value);         console.log('less 10');         $('.added_mobilephone').mask('(999) 999-9999? 9999999999');       } else if (this.value.length > 9) {         console.log(this.value);         console.log('greater 10');         $('.added_mobilephone').mask('99999999999999999999');       }*/     });     break; 

you've solved problem, it's worth noting future reference else need apply multiple masks control may want explore inputmask plugin.

it has more callbacks, settings , many out of box mask types(be sure take @ extension files). can define multiple masks control, , plugin try , apply appropriate mask based on value.

here fiddle demo previous statement:

$(window).load(function()  {     var phones = [{ "mask": "(###) ###-####"}, { "mask": "(###) ###-##############"}];      $('#textbox').inputmask({           mask: phones,           greedy: false,           definitions: { '#': { validator: "[0-9]", cardinality: 1}} });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>  <input type='text' id='textbox' />