title: Auto filling parentheses and hyphen for phone number input jquery
body: <p>I want to have a user's input auto fill the punctuation of a phone number to look like this (xxx) xxx-xxxx.  I have written an example jfiddle <a href="https://jsfiddle.net/x5508buz/" rel="nofollow">here</a> but it breaks when filling in the last 4 digits of the phone number.</p>
  
  <pre><code>$("#phone").on("change keyup paste", function () {
      var output;
      var input = $("#phone").val();
      input = input.replace(/[^0-9]/g, '');
      var area = input.substr(0, 3);
      var pre = input.substr(3, 4);
      var tel = input.substr(6, 4);
      if (area.length &lt; 3) {
          output = "(" + area;
      } else if (area.length == 3 &amp;&amp; pre.length &lt; 3) {
          output = "(" + area + ")" + " " + pre;
      } else if (area.length == 3 &amp;&amp; pre.length == 3) {
          output = "(" + area + ")" + " " + pre + "-" + tel;
      }
      $("#phone").val(output);
  });
  
  HTMl:
  &lt;input id='phone'&gt;&lt;/input&gt;
  </code></pre>