title: Dynamically formatting textbox for credit card expiration date
body: <p>I know that I've seen a few websites use this before but I can't find any examples now. </p>
  
  <p>What I want is a textbox where after the user enters the first two numbers (the month) a forward slash is added and then the user types the last two numbers (the year) but if they were to backspace it would skip over the forward slash (i.e. it simply isn't just injected into the textbox). How is this possible with javascript?</p>
  
  <p>Edit: Below is what I've tried but then the user could click in the textbox and delete the '/' if they wanted to.</p>
  
  <pre><code>var expiresDateField = document.getElementById('j_idt8:ccexpires');
          expiresDateField.onkeydown = function() {
              var key = event.keyCode || event.charCode;
              if (expiresDateField.value.length === 2)
                  expiresDateField.value = expiresDateField.value + " / ";
              else if (expiresDateField.value.length === 6 &amp;amp;&amp;amp; (key === 8 || key === 46))
                  expiresDateField.value = expiresDateField.value.substr(0, 2);
  };
  </code></pre>