如何将键盘焦点赋予DIV并为其附加键盘事件处理程序？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在构建一个应用程序，我希望该应用程序能够单击由DIV表示的矩形，然后使用键盘通过列出键盘事件来移动该DIV。

我可以在DIV级别上监听键盘事件，而不是在文档级别上使用事件监听器监听这些键盘事件，也许可以通过将焦点放在键盘上来进行监听？

这是一个简化的示例来说明问题：

<html>
<head>
</head>
<body>
<div id="outer" style="background-color:#eeeeee;padding:10px">
outer
   <div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;">
   want to be able to focus this element and pick up keypresses
   </div>
</div>
<script language="Javascript">
function onClick()
{
    document.getElementById('inner').innerHTML="clicked";
    document.getElementById('inner').focus();
}
//this handler is never called
function onKeypressDiv()
{
    document.getElementById('inner').innerHTML="keypress on div";
}
function onKeypressDoc()
{
    document.getElementById('inner').innerHTML="keypress on doc";
}
//install event handlers
document.getElementById('inner').addEventListener("click", onClick, false);
document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false);
document.addEventListener("keypress", onKeypressDoc, false);
</script>
</body>
</html>

在单击内部DIV时，我尝试为其指定焦点，但后续的键盘事件总是在文档级别而不是在DIV级别事件监听器上拾取。

我是否只需要实现特定于应用程序的键盘焦点概念？

我应该补充一点，我只需要这个就可以在Firefox中工作。

回答：

排序-我在目标DIV中添加了tabindex属性，这使它可以拾取键盘事件，例如

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

以上是 如何将键盘焦点赋予DIV并为其附加键盘事件处理程序？ 的全部内容， 来源链接： utcz.com/qa/401316.html

回到顶部