title: Input validation in the keydown event
body: <p>I'm attempting to do info validation against user text input in the process of <code>keydown</code> event. The reason that I am trying to validate in the <code>keydown</code> event is because I do not want to display the characters those that are considered to be illegal in the <code>input</code> box at the beginning.</p>
  
  <p>The validation I am writing is like this,</p>
  
  <pre><code>function validateUserInput(){
     var code = this.event.keyCode;
      if ((code&lt;48||code&gt;57) // numerical
        &amp;&amp;code!==46 //delete
        &amp;&amp;code!==8  //back space
        &amp;&amp;code!==37 // &lt;- arrow 
        &amp;&amp;code!==39) // -&gt; arrow
     {
       this.event.preventDefault();        
      }
  }
  </code></pre>
  
  <p>I can keep going like this, however I am seeing drawbacks on this implementation. Those are, for example:</p>
  
  <ol>
  <li>Conditional statement become longer and longer when I put more conditions to be examined.</li>
  <li><code>keyCodes</code> can be different by browsers. </li>
  <li>I have to not only check what is not legal but also have to check what are exceptional. In above examples, <kbd>delete</kbd>, <kbd>backspace</kbd>, and <kbd>arrow</kbd> keys are exceptional.</li>
  </ol>
  
  <p>But the feature that I don't want to lose is having not to display the input in the <code>textarea</code> unless it passes the validation. (In case the user try to put illegal characters in the <code>textarea</code>, nothing should appear at all) That is why I am not doing validation upon <code>keyup</code> event.</p>
  
  <p>So my question is:</p>
  
  <ol>
  <li>Are there better ways to validate input in <code>keydown</code> event than checking <code>keyCode</code> by <code>keyCode</code>?</li>
  <li>Are there other ways to capture the user inputs other than <code>keydown</code> event before browser displays it? And a way to put the validation on it?</li>
  </ol>