2016-11-15 88 views
0

我有虛擬鍵盤。
當任何按鍵被按下時,我想要激活按鈕。
我使用CSS活動類。有用。但它只有當我按下鼠標按鈕時才起作用。
如果我按鍵盤上的按鈕它不起作用。
這裏是我的CSS如何使用java腳本或jQuery的活動按鈕?

#keyboard li:active { 
    position: relative; 
    top: 1px; 
    left: 1px; 
    background-color: #e74c3c; 
    border-color: #e5e5e5; 
    cursor: pointer; 
    color:white; 
} 

這是鏈接
http://projects.imube.com/keyboard/

+0

你能提供一個相同的工作片段嗎? –

回答

1

var hey = document.getElementById('hey'); 
 

 
let makeActive =() => { 
 
    hey.classList.contains('active') ? hey.classList.remove('active') : hey.classList.add('active'); 
 
} 
 

 
hey.onclick = makeActive; 
 

 
window.onkeypress = (e) => { 
 
    let key = e.keyCode || e.which; 
 

 
    if(e.keyCode == 13) { 
 
    makeActive(); 
 
    } 
 
}
a.active { 
 
    color: red; 
 
}
<a id="hey">Press Enter or Click this!</a>

需要兩個不同的事件處理程序。一個是按鍵並單擊。

這裏你可以得到的keyCode:https://css-tricks.com/snippets/javascript/javascript-keycodes/

希望它能幫助。

+0

OP使用了jQuery,所以如果你爲每個按鈕添加一個類'key'和'keyCode'作爲id,會更容易。所以你可以做'$('.key')。removeClass('active'); $('#'+ e.keyCode).addClass('active');'每當有一個keyPress –

+0

OP說javascript或jQuery。由於渲染速度快,我喜歡javascript。 –

相關問題