尝试为某个字符创建按键事件以突出显示我网页上的特定 div

Question

我正在尝试找出如何根据网页键盘上的按键事件突出显示某个 div。如果有人能帮助我，那就太棒了。干杯。

Answer 1

也许像这样的东西应该有用

HTML

<div id="mydiv">Text</div>

CSS

.highlight{
   background:green;
}

JS

document.addEventListener('keydown',function(e){
   if(e.key == '<key here>') mydiv.classList.add('highlight')
})

测试在 jsfiddle 上工作：https://jsfiddle.net/u9z68arp/

Answer 2

如果您正在使用 jquery，jsfiddle 会有所帮助。

HTML

<div id='test'>Hello world</div>

CSS

#test {
    border: 1px solid black;
    float:left;
}
.new {
    border:4px solid red !important;
}

JS

$(function() {
  $(document).on('keydown',function() {
    if(e.which == 65 || e.which == 66) {  # 65 and 66 are ASCII for a and b in small caps
       $('#test').addClass('new');
    }
  });
  $(document).on('keyup',function() {
    $('#test').removeClass('new');
  });
})

尝试为某个字符创建按键事件以突出显示我网页上的特定 div

Trying to create a keydown event for a certain character to highlight a specific div on my webpage

html

javascript

keyboard-events