jquery - Change color of li class with javascript when keyboard key is pressed -
i've created keyboard html , css, , i'm trying make keys "glow" different background-color when same key pressed on keyboard (the real-life keyboard is).
it looks this:
<div id="keyboard"> <ul class="row"> <li class="letter">q</li> <li class="letter">w</li> . . . </ul> </div>
and have following javascript code:
$('#keyboard .letter').keydown(function() { $(this).addclass('red'); }).keyup(function() { $(this).removeclass('red'); });
this worked me:
html
<div id="keyboard"> <ul class="row"> <li class="letter" id="q">q</li> <li class="letter" id="w">w</li>. . .</ul> </div>
jquery
$(document).keypress(function(e){ var which_letter = string.fromcharcode(e.which); $('#'+which_letter+'').addclass('red'); }); $(document).keyup(function(){ $(".letter").removeclass('red'); });
css
.red { color:#f00; }
note
if letter glow no matter if he/she presses 'x' or 'x', change:
var which_letter = string.fromcharcode(e.which);
to:
var which_letter = string.fromcharcode(e.which).tolowercase();
otherwise user must press value of letter's id
.
Comments
Post a Comment