title: Create an input field with a placeholder that gets written into upon text entry
body: <p>I'm trying to create an input field for a phone number.  I would like the placeholder to show the expected format/pattern: (XXX) XXX-XXXX as shown below.</p>
  
  <pre><code>Phone Number: &lt;input type="text" name="phone" placeholder="(XXX) XXX-XXXX"&gt;
  </code></pre>
  
  <p>However, when the user starts entering numbers, I'd like them to simply replace the individual X's.</p>
  
  <p>After inputting a few numbers the field would look like this (cursor after the 4)... </p>
  
  <pre><code>"(302) 4XX-XXXX"
  </code></pre>
  
  <p>And then the user entering backspace would simply replace the last number entered with an X again.  After 2 backspaces...</p>
  
  <pre><code>"(30X) XXX-XXXX"
  </code></pre>
  
  <p>I've seen this behavior before in registration forms, but I haven't been able to locate any examples lately.  I was hoping there might be a decent jquery plugin that accomplishes this, but I have not found it yet.</p>