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.
Included is the actual code, and a Fiddle where everything is operational.
Thanks in advance!
<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');
}
});
You were removing class after added it: {there are two .shift buttons}
$('.shft').addClass('active').siblings().not('.shft').removeClass('active');