title: javascript (jquery) numeric input: keyCode for '3' and '#' are the same
body: <p>I need to set up an <code>&lt;input type="text" /&gt;</code> so that it will accept only numeric chars, backspace, delete, enter, tabs and arrows.</p>
  
  <p>There's a lot of exemple around there, i started with something similar to this:</p>
  
  <pre><code>function isNumericKeyCode (keyCode){
      return ( (keyCode &gt;= 48 &amp;&amp; keyCode &lt;= 57) //standard keyboard
             ||(keyCode &gt;= 96 &amp;&amp; keyCode &lt;= 105)) //Numpad
  }
  
  $('#myTextBox').keydown(function(e){
           var handled = true;
           var keyCode = e.keyCode;
           switch(keyCode){
              //Enter and arrows
              case 13:
              case 37:
              case 38:
              case 39:
              case 40:
                 doSomethingSpecialsWithThesesKeys();
                 break;
              default:
                 handled = false;
                 break;
           }
  
           if (  !handled
              &amp;&amp; keyCode !== 8 //backspace
              &amp;&amp; keyCode !== 9 //tab
              &amp;&amp; keyCode !== 46 //del
              &amp;&amp; !isNumericKeyCode(keyCode)){
  
              handled = true;
           }
  
           return handled;
  });
  </code></pre>
  
  <p>All that worked perfectly until I hit the "#" key. In my french canadian keyboard, the "#" has his own key (no shift implied) that returns keyCode 51, the same as the number "3".</p>
  
  <p>I think that in US keyboard, the "#" is obtained by pressing shift+3, that may be why they have the same keycode.</p>
  
  <p>Now I realize that I have to handle the shift and alt keys too, but that's another story.</p>
  
  <p>It works differently with the jquery keypress event, which offer the charCode property, but I did not used it at first because of what the <a href="http://api.jquery.com/keypress/" rel="nofollow">documentation</a> says :</p>
  
  <blockquote>
    <p>as the keypress event isn't covered by any official specification, the
    actual behavior encountered when using it may differ across browsers,
    browser versions, and platforms.</p>
  </blockquote>
  
  <p>Also, I would need a workaround in that case to handle tabs, arrows and other special keys since they don't provide a charCode.</p>
  
  <p>So the question is :
  <strong>is there a way to allow only some specifics chars using the keydown event? And that, in a way that will work independently of the keyboard layout?</strong></p>
  
  <p>As a side quest : Which browsers may be problematics with the keypress event? I mean, currently I don't really care if my website does not support IE6. I am targetting recent browsers.</p>
  
  <h2>Edit</h2>
  
  <hr>
  
  <p>As someone pointed out in the comments, this method does not allow user to "ctrl+v" a number in the input. In my particular case this is really not a requirement to be able to paste a number. But this popped something in my head, the user still can right-clic > copy some text in the input, and in that case that could be anything. The more I think of it, the more it seems to me that I will need the <code>keydown</code> event to handle tabs and arrows, and <em>another</em> event to handle the input itself.</p>
  
  <h2>Edit2</h2>
  
  <hr>
  
  <p>A lot of beautiful answers here, but the award goes to <a href="http://mrtsherman" rel="nofollow">mrtsherman</a> for the use of <code>input</code> and <code>propertychange</code> events. I will use a combination of this answer for the numeric validation, plus the <code>keyCode</code> event as before for the special use of arrows, tabs and enter keys.</p>