我正在构建一个Web应用程序,用户可以通过单击按钮或使用键盘快捷键来触发交互。
使用以下方法更改背景颜色时,按钮会提供视觉反馈:
button:active {
background-color: #73B4E4;
}
但是,如果用户使用键盘快捷键触发交互,如何触发相同的按钮反馈?
一些代码:
声明按钮:
const skipButton = document.getElementById("skip");
点击:
触发的功能if (skipButton) skipButton.onclick = (event) => onSkip();
功能相同,但使用键盘快捷键触发:
document.onkeydown = function(e) {
switch (e.keyCode) {
//commented out the other cases
case 88:
onSkip();
break;
}
};
我考虑过这样的事情:
$('.btn').click(function() {
$(this).toggleClass('active');
});
但我不希望我的按钮保持其活动状态,我只是希望它在按下时闪烁(按钮:活动状态)。
任何提示?