我用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類的顏色

回答

注

相關問題