Ändern der Farbe der li-Klasse mit Javascript, wenn die Tastatur gedrückt wird

Question

Ich habe eine Tastatur mit HTML und CSS erstellt, und ich versuche, die Tasten mit einer anderen Hintergrundfarbe "glühen", wenn die gleiche Taste gedrückt wird auf der Tastatur (die echte Tastatur, die ist).

Es sieht ungefähr so ​​aus:

<div id="keyboard"> 
<ul class="row"> 
<li class="letter">Q</li> 
<li class="letter">W</li> 
. 
. 
. 
</ul> 
</div> 

Und ich habe folgende JavaScript-Code:

$('#keyboard .letter').keydown(function() { 
$(this).addClass('red'); 
}).keyup(function() { 
$(this).removeClass('red'); 
}); 

Answer 1

Das ist für mich gearbeitet:

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; } 

DEMO

Hinweis

Wenn Sie den Brief wie, egal zu leuchten, wenn er/sie drückt 'X' oder 'x', Änderung:

var which_letter = String.fromCharCode(e.which); 

zu:

var which_letter = String.fromCharCode(e.which).toLowerCase(); 

Andernfalls wird der Benutzer genau id den Wert des Schreibens des drücken müssen.

Answer 2

Wie ich sehen kann, verwenden Sie jQuery. So ist es einfach, wichtige Ereignisse auszulösen wie diese zum Beispiel:

var e = jQuery.Event("keydown"); 
e.which = 50; // Your code value here 
$("input").trigger(e); 

Außerdem, wenn Sie Klicks auf Ihrer Tastatur verwenden möchten, dann müssen Sie Eingabefeldtyp verwenden.