title: JQuery Keydown, Keypress, Keycode, etc
body: <p>I'm looking for some help on why the shift key in the current arrangement doesn't fire when the key is pressed. In the code below, every single key/character works as expected, with exception of the shift key. I'd love any help that anyone can give me. I've changed the keydown even to keypress, keyup; still, nothing. </p>
  
  <p>Included is the actual code, and a Fiddle where everything is operational.</p>
  
  <p><a href="http://jsfiddle.net/yKCSw/" rel="nofollow">http://jsfiddle.net/yKCSw/</a></p>
  
  <p>Thanks in advance!</p>
  
  <pre><code>&lt;pre&gt;
  &lt;div id="keyboard"&gt;
      &lt;row class="one"&gt;
          &lt;key class="single esc"&gt;esc&lt;/key&gt;
          &lt;key class="single f1"&gt;F1&lt;/key&gt;
          &lt;key class="single f2"&gt;f2&lt;/key&gt;
          &lt;key class="single f3"&gt;f3&lt;/key&gt;
          &lt;key class="single f4"&gt;f4&lt;/key&gt;
          &lt;key class="single f5"&gt;f5&lt;/key&gt;
          &lt;key class="single f6"&gt;f6&lt;/key&gt;
          &lt;key class="single f7"&gt;f7&lt;/key&gt;
          &lt;key class="single f8"&gt;f8&lt;/key&gt;
          &lt;key class="single f9"&gt;f9&lt;/key&gt;
          &lt;key class="single f10"&gt;f10&lt;/key&gt;
          &lt;key class="single f11"&gt;f11&lt;/key&gt;
          &lt;key class="single f12"&gt;f12&lt;/key&gt;
          &lt;key class="single f13"&gt;F13&lt;/key&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/row&gt;
      &lt;row class="two"&gt;
          &lt;key class="double til"&gt;~&lt;span&gt;`&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 1"&gt;!&lt;span&gt;1&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 2"&gt;@&lt;span&gt;2&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 3"&gt;#&lt;span&gt;3&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 4"&gt;$&lt;span&gt;4&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 5"&gt;%&lt;span&gt;5&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 6"&gt;^&lt;span&gt;6&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 7"&gt;&amp;&lt;span&gt;7&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 8"&gt;*&lt;span&gt;8&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 9"&gt;(&lt;span&gt;9&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double 0"&gt;)&lt;span&gt;0&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double hyp"&gt;_&lt;span&gt;-&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double equ"&gt;+&lt;span&gt;=&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="single delete right"&gt;Delete&lt;/key&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/row&gt;
      &lt;row class="three"&gt;
          &lt;key class="tab left"&gt;Tab&lt;/key&gt;
          &lt;key class="single q"&gt;q&lt;/key&gt;
          &lt;key class="single w"&gt;w&lt;/key&gt;
          &lt;key class="single e"&gt;e&lt;/key&gt;
          &lt;key class="single r"&gt;r&lt;/key&gt;
          &lt;key class="single t"&gt;t&lt;/key&gt;
          &lt;key class="single y"&gt;y&lt;/key&gt;
          &lt;key class="single u"&gt;u&lt;/key&gt;
          &lt;key class="single i"&gt;i&lt;/key&gt;
          &lt;key class="single o"&gt;o&lt;/key&gt;
          &lt;key class="single p"&gt;p&lt;/key&gt;
          &lt;key class="double lbrack"&gt;{&lt;span&gt;[&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double rbrack"&gt;}&lt;span&gt;]&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double bs"&gt;|&lt;span&gt;\&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/row&gt;
      &lt;row class="four"&gt;
          &lt;key class="single caps left"&gt;Caps lock&lt;/key&gt;
          &lt;key class="single a"&gt;a&lt;/key&gt;
          &lt;key class="single s"&gt;s&lt;/key&gt;
          &lt;key class="single d"&gt;d&lt;/key&gt;
          &lt;key class="single f"&gt;f&lt;/key&gt;
          &lt;key class="single g"&gt;g&lt;/key&gt;
          &lt;key class="single h"&gt;h&lt;/key&gt;
          &lt;key class="single j"&gt;j&lt;/key&gt;
          &lt;key class="single k"&gt;k&lt;/key&gt;
          &lt;key class="single l"&gt;l&lt;/key&gt;
          &lt;key class="double col"&gt;:&lt;span&gt;;&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double apos"&gt;"&lt;span&gt;'&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="single return right double"&gt;Enter&lt;span&gt;return&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/row&gt;
      &lt;row class="five"&gt;
          &lt;key class="single shft left"&gt;Shift&lt;/key&gt;
          &lt;key class="single z"&gt;z&lt;/key&gt;
          &lt;key class="single x"&gt;x&lt;/key&gt;
          &lt;key class="single c"&gt;c&lt;/key&gt;
          &lt;key class="single v"&gt;v&lt;/key&gt;
          &lt;key class="single b"&gt;b&lt;/key&gt;
          &lt;key class="single n"&gt;n&lt;/key&gt;
          &lt;key class="single m"&gt;m&lt;/key&gt;
          &lt;key class="double comm"&gt;
              &lt;&lt;span&gt;,&lt;/span&gt;
          &lt;/key&gt;
          &lt;key class="double great"&gt;&gt;&lt;span&gt;.&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="double quest"&gt;?&lt;span&gt;/&lt;/span&gt;
  
          &lt;/key&gt;
          &lt;key class="single shft right"&gt;Shift&lt;/key&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/row&gt;
  &lt;/div&gt;
  &lt;/pre&gt;
  </code></pre>
  
  <p>JQuery - </p>
  
  <pre><code>$('body').on('keydown', function (e) {
  
      var p = e.which;
  
      if (p === 27) {
          e.preventDefault();
          $('.esc').addClass('active').siblings().removeClass('active');
      } else if (p === 112) {
          e.preventDefault();
          $('.f1').addClass('active').siblings().removeClass('active');
      } else if (p === 113) {
          e.preventDefault();
          $('.f2').addClass('active').siblings().removeClass('active');
      } else if (p === 114) {
          e.preventDefault();
          $('.f3').addClass('active').siblings().removeClass('active');
      } else if (p === 115) {
          e.preventDefault();
          $('.f4').addClass('active').siblings().removeClass('active');
      } else if (p === 116) {
          e.preventDefault();
          $('.f5').addClass('active').siblings().removeClass('active');
      } else if (p === 117) {
          e.preventDefault();
          $('.f6').addClass('active').siblings().removeClass('active');
      } else if (p === 118) {
          e.preventDefault();
          $('.f7').addClass('active').siblings().removeClass('active');
      } else if (p === 119) {
          e.preventDefault();
          $('.f8').addClass('active').siblings().removeClass('active');
      } else if (p === 120) {
          e.preventDefault();
          $('.f9').addClass('active').siblings().removeClass('active');
      } else if (p === 121) {
          e.preventDefault();
          $('.f10').addClass('active').siblings().removeClass('active');
      } else if (p === 122) {
          e.preventDefault();
          $('.f11').addClass('active').siblings().removeClass('active');
      } else if (p === 123) {
          e.preventDefault();
          $('.f12').addClass('active').siblings().removeClass('active');
      } else if (p === 192) {
          e.preventDefault();
          $('.til').addClass('active').siblings().removeClass('active');
      } else if (p === 49) {
          e.preventDefault();
          $('.1').addClass('active').siblings().removeClass('active');
      } else if (p === 50) {
          e.preventDefault();
          $('.2').addClass('active').siblings().removeClass('active');
      } else if (p === 51) {
          e.preventDefault();
          $('.3').addClass('active').siblings().removeClass('active');
      } else if (p === 52) {
          e.preventDefault();
          $('.4').addClass('active').siblings().removeClass('active');
      } else if (p === 53) {
          e.preventDefault();
          $('.5').addClass('active').siblings().removeClass('active');
      } else if (p === 54) {
          e.preventDefault();
          $('.6').addClass('active').siblings().removeClass('active');
      } else if (p === 55) {
          e.preventDefault();
          $('.7').addClass('active').siblings().removeClass('active');
      } else if (p === 56) {
          e.preventDefault();
          $('.8').addClass('active').siblings().removeClass('active');
      } else if (p === 57) {
          e.preventDefault();
          $('.9').addClass('active').siblings().removeClass('active');
      } else if (p === 48) {
          e.preventDefault();
          $('.0').addClass('active').siblings().removeClass('active');
      } else if (p === 189) {
          e.preventDefault();
          $('.hyp').addClass('active').siblings().removeClass('active');
      } else if (p === 187) {
          e.preventDefault();
          $('.equ').addClass('active').siblings().removeClass('active');
      } else if (p === 8) {
          e.preventDefault();
          $('.delete').addClass('active').siblings().removeClass('active');
      } else if (p === 9) {
          e.preventDefault();
          $('.tab').addClass('active').siblings().removeClass('active');
      } else if (p === 81) {
          e.preventDefault();
          $('.q').addClass('active').siblings().removeClass('active');
      } else if (p === 87) {
          e.preventDefault();
          $('.w').addClass('active').siblings().removeClass('active');
      } else if (p === 69) {
          e.preventDefault();
          $('.e').addClass('active').siblings().removeClass('active');
      } else if (p === 82) {
          e.preventDefault();
          $('.r').addClass('active').siblings().removeClass('active');
      } else if (p === 84) {
          e.preventDefault();
          $('.t').addClass('active').siblings().removeClass('active');
      } else if (p === 89) {
          e.preventDefault();
          $('.y').addClass('active').siblings().removeClass('active');
      } else if (p === 85) {
          e.preventDefault();
          $('.u').addClass('active').siblings().removeClass('active');
      } else if (p === 73) {
          e.preventDefault();
          $('.i').addClass('active').siblings().removeClass('active');
      } else if (p === 79) {
          e.preventDefault();
          $('.o').addClass('active').siblings().removeClass('active');
      } else if (p === 80) {
          e.preventDefault();
          $('.p').addClass('active').siblings().removeClass('active');
      } else if (p === 219) {
          e.preventDefault();
          $('.lbrack').addClass('active').siblings().removeClass('active');
      } else if (p === 221) {
          e.preventDefault();
          $('.rbrack').addClass('active').siblings().removeClass('active');
      } else if (p === 220) {
          e.preventDefault();
          $('.bs').addClass('active').siblings().removeClass('active');
      } else if (p === 20) {
          e.preventDefault();
          $('.caps').addClass('active').siblings().removeClass('active');
      } else if (p === 65) {
          e.preventDefault();
          $('.a').addClass('active').siblings().removeClass('active');
      } else if (p === 83) {
          e.preventDefault();
          $('.s').addClass('active').siblings().removeClass('active');
      } else if (p === 68) {
          e.preventDefault();
          $('.d').addClass('active').siblings().removeClass('active');
      } else if (p === 70) {
          e.preventDefault();
          $('.f').addClass('active').siblings().removeClass('active');
      } else if (p === 71) {
          e.preventDefault();
          $('.g').addClass('active').siblings().removeClass('active');
      } else if (p === 72) {
          e.preventDefault();
          $('.h').addClass('active').siblings().removeClass('active');
      } else if (p === 74) {
          e.preventDefault();
          $('.j').addClass('active').siblings().removeClass('active');
      } else if (p === 75) {
          e.preventDefault();
          $('.k').addClass('active').siblings().removeClass('active');
      } else if (p === 76) {
          e.preventDefault();
          $('.l').addClass('active').siblings().removeClass('active');
      } else if (p === 186) {
          e.preventDefault();
          $('.col').addClass('active').siblings().removeClass('active');
      } else if (p === 222) {
          e.preventDefault();
          $('.apos').addClass('active').siblings().removeClass('active');
      } else if (p === 13) {
          e.preventDefault();
          $('.return').addClass('active').siblings().removeClass('active');
      } else if (p === 16) {
          e.preventDefault();
          $('.shft').addClass('active').siblings().removeClass('active');
      } else if (p === 90) {
          e.preventDefault();
          $('.z').addClass('active').siblings().removeClass('active');
      } else if (p === 88) {
          e.preventDefault();
          $('.x').addClass('active').siblings().removeClass('active');
      } else if (p === 67) {
          e.preventDefault();
          $('.c').addClass('active').siblings().removeClass('active');
      } else if (p === 86) {
          e.preventDefault();
          $('.v').addClass('active').siblings().removeClass('active');
      } else if (p === 66) {
          e.preventDefault();
          $('.b').addClass('active').siblings().removeClass('active');
      } else if (p === 78) {
          e.preventDefault();
          $('.n').addClass('active').siblings().removeClass('active');
      } else if (p === 77) {
          e.preventDefault();
          $('.m').addClass('active').siblings().removeClass('active');
      } else if (p === 188) {
          e.preventDefault();
          $('.comm').addClass('active').siblings().removeClass('active');
      } else if (p === 190) {
          e.preventDefault();
          $('.great').addClass('active').siblings().removeClass('active');
      } else if (p === 191) {
          e.preventDefault();
          $('.quest').addClass('active').siblings().removeClass('active');
      } else if (p === 16) {
          e.preventDefault();
          $('.shft').addClass('active');
      } else if (p === 220) {
          e.preventDefault();
          $('.bs').addClass('active').siblings().removeClass('active');
      }
  
  });
  </code></pre>