如何更改虚拟键盘每个按钮的背景？-解网

问：

你能帮我使用我的虚拟键盘吗？我需要添加键下事件，并在每个按钮上将背景更改为橙色。在 HTML 中，我使用带有类和 ..letter.symbol

window.addEventListener('keydown', function(event) {
    console.log('Event', event)

    if(event.keyCode) {
      myButton.style.backgroundColor = 'orange';  
    }

})

window.addEventListener('keyup', function(event){
    myButton.style.backgroundColor = 'white'
 })

javascript dom-events 键控

@epascarello，如果没有一个最小的可重现示例，就不清楚他们试图做什么，所以如果他们有一个虚拟键盘，并且想在悬停/点击/触摸时更改背景颜色，这些 CSS 属性允许轻松完成。但是，如果他们试图在按下该键本身时更改背景颜色，那么是的，他们需要使用 JS 来处理这个问题。我的观点是，问题中没有足够的信息来建议一个有用的答案。

答：

1赞 epascarello 7/19/2023 #1

使用数据属性，您可以根据按下的键选择按钮。

function updateKeys(evt) {
  const btn = document.querySelector(`button[data-key="${evt.key}"]`);
  if (!btn) return;
  btn.classList.toggle('active', event.type === 'keydown');
}


window.addEventListener('keydown', updateKeys);
window.addEventListener('keyup', updateKeys);

.active {
  background-color: orange;
}

<button data-key="a">a</button>
<button data-key="s">s</button>
<button data-key="d">d</button>
<button data-key="f">f</button>

如何更改虚拟键盘每个按钮的背景？

How to change background on every button of virtual keyboard?

评论

评论