我用HTML和CSS创建了一个键盘，并且我试图在按下同一个按键时使用不同背景颜色的按键发光在键盘上（即现实生活中的键盘）。按键盘按键时用javascript更改li类的颜色

它看起来是这样的：

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

，我有以下的javascript代码：

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

来源

2014-01-31 Håvard Brynjulfsen

那么问题是什么？ – ElendilTheTall

当我按下某个键时，颜色不会改变 –

如何在那里按一个键？这不是一个输入字段？ –

这为我工作：

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

注

如果你想信焕发不管他/她按下 'X'或'x'，更改：

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

到：

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

否则，用户必须按准确的价值信的id。

来源

2014-01-31 14:07:35

非常感谢，也为我工作:) –

正如我所看到的你正在使用jQuery。所以很容易引发关键事件，像这样的，例如：

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

此外，如果你想使用你的键盘上点击，那么你必须使用字段的输入类型。

来源

2014-01-31 14:14:41

按键盘按键时用javascript更改li类的颜色

回答

注

相关问题