JQuery Keydown, Keypress, Keycode и т. Д.

Question

Мне нужна помощь в том, почему клавиша shift в текущем устройстве не срабатывает при нажатии клавиши. В приведенном ниже коде каждый ключ/символ работает, как ожидалось, за исключением клавиши shift. Мне бы хотелось, чтобы кто-нибудь помог мне. Я изменил keydown даже при нажатии, keyup; еще ничего.

В комплект входит фактический код и скрипт, где все работает.

http://jsfiddle.net/yKCSw/

Заранее спасибо!

<pre> 
<div id="keyboard"> 
    <row class="one"> 
     <key class="single esc">esc</key> 
     <key class="single f1">F1</key> 
     <key class="single f2">f2</key> 
     <key class="single f3">f3</key> 
     <key class="single f4">f4</key> 
     <key class="single f5">f5</key> 
     <key class="single f6">f6</key> 
     <key class="single f7">f7</key> 
     <key class="single f8">f8</key> 
     <key class="single f9">f9</key> 
     <key class="single f10">f10</key> 
     <key class="single f11">f11</key> 
     <key class="single f12">f12</key> 
     <key class="single f13">F13</key> 
     <div class="clearfix"></div> 
    </row> 
    <row class="two"> 
     <key class="double til">~<span>`</span> 

     </key> 
     <key class="double 1">!<span>1</span> 

     </key> 
     <key class="double 2">@<span>2</span> 

     </key> 
     <key class="double 3">#<span>3</span> 

     </key> 
     <key class="double 4">$<span>4</span> 

     </key> 
     <key class="double 5">%<span>5</span> 

     </key> 
     <key class="double 6">^<span>6</span> 

     </key> 
     <key class="double 7">&<span>7</span> 

     </key> 
     <key class="double 8">*<span>8</span> 

     </key> 
     <key class="double 9">(<span>9</span> 

     </key> 
     <key class="double 0">)<span>0</span> 

     </key> 
     <key class="double hyp">_<span>-</span> 

     </key> 
     <key class="double equ">+<span>=</span> 

     </key> 
     <key class="single delete right">Delete</key> 
     <div class="clearfix"></div> 
    </row> 
    <row class="three"> 
     <key class="tab left">Tab</key> 
     <key class="single q">q</key> 
     <key class="single w">w</key> 
     <key class="single e">e</key> 
     <key class="single r">r</key> 
     <key class="single t">t</key> 
     <key class="single y">y</key> 
     <key class="single u">u</key> 
     <key class="single i">i</key> 
     <key class="single o">o</key> 
     <key class="single p">p</key> 
     <key class="double lbrack">{<span>[</span> 

     </key> 
     <key class="double rbrack">}<span>]</span> 

     </key> 
     <key class="double bs">|<span>\</span> 

     </key> 
     <div class="clearfix"></div> 
    </row> 
    <row class="four"> 
     <key class="single caps left">Caps lock</key> 
     <key class="single a">a</key> 
     <key class="single s">s</key> 
     <key class="single d">d</key> 
     <key class="single f">f</key> 
     <key class="single g">g</key> 
     <key class="single h">h</key> 
     <key class="single j">j</key> 
     <key class="single k">k</key> 
     <key class="single l">l</key> 
     <key class="double col">:<span>;</span> 

     </key> 
     <key class="double apos">"<span>'</span> 

     </key> 
     <key class="single return right double">Enter<span>return</span> 

     </key> 
     <div class="clearfix"></div> 
    </row> 
    <row class="five"> 
     <key class="single shft left">Shift</key> 
     <key class="single z">z</key> 
     <key class="single x">x</key> 
     <key class="single c">c</key> 
     <key class="single v">v</key> 
     <key class="single b">b</key> 
     <key class="single n">n</key> 
     <key class="single m">m</key> 
     <key class="double comm"> 
      <<span>,</span> 
     </key> 
     <key class="double great">><span>.</span> 

     </key> 
     <key class="double quest">?<span>/</span> 

     </key> 
     <key class="single shft right">Shift</key> 
     <div class="clearfix"></div> 
    </row> 
</div> 
</pre> 

JQuery -

$('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'); 
    } 

}); 

Answer 1

Вы убирали класс после того, как добавил его: {есть две кнопки .shift}

$('.shft').addClass('active').siblings().not('.shft').removeClass('active'); 

Answer 2

Вы можете проверить, если смена ключа была нажата с помощью e.shiftKey. Я добавил код на вашем jsfiddle:

if(e.shiftKey){ 
    $('key').removeClass('active'); 
    $('.shft').addClass('active'); 
} 

New JSFiddle