title: How to change Phone number format in input as you type?
body: <p><strong>My CodePen:</strong> <a href="http://codepen.io/leongaban/pen/cyaAL">http://codepen.io/leongaban/pen/cyaAL</a></p>
  
  <p>I have an input field for a phone number which allows up to 20 characters (for international numbers).</p>
  
  <p>I'm also using the <a href="http://digitalbush.com/projects/masked-input-plugin/">Masked input jQuery plugin</a> by <a href="https://twitter.com/digitalBush">Josh Bush</a> to format the phone number in the input to make it 'pretty'.</p>
  
  <p><a href="http://codepen.io/leongaban/pen/cyaAL"><img src="https://i.stack.imgur.com/1BUdD.png" alt="enter image description here"></a><br/><br/></p>
  
  <ul>
  <li><p>My problem is that in the requirements when the phone is 10 digits or
  less, it should use the Masked input formatting.</p></li>
  <li><p>However when the phone number is longer then 10 digits, the
  formatting should be removed.</p></li>
  </ul>
  
  <p><br/></p>
  
  <hr>
  
  <p>Here is my current: <a href="http://codepen.io/leongaban/pen/cyaAL"><strong>CodePen</strong></a>, Cell Phone is the input field where I'm trying to accomplish this. Work Phone is an example of the default functionality of the <a href="http://digitalbush.com/projects/masked-input-plugin/">Mask input plugin</a>.</p>
  
  <p><strong>How would you go about this problem?</strong></p>
  
  <p><em>jQuery for Cell Phone input field:</em></p>
  
  <pre><code>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 &gt; 10) {
          console.log('this.value = '+this.value.trim());
          console.log('greater then 10');
          $('.added_mobilephone').mask('99999999999999999999');
        }
  
        /*if (this.value.length &lt; 9) {
          console.log(this.value);
          console.log('less then 10');
          $('.added_mobilephone').mask('(999) 999-9999? 9999999999');
        } else if (this.value.length &gt; 9) {
          console.log(this.value);
          console.log('greater then 10');
          $('.added_mobilephone').mask('99999999999999999999');
        }*/
      });
      break;
  </code></pre>