如何将键盘焦点放在DIV上并将键盘事件处理程序附加到它？

StackOverflow https://stackoverflow.com/questions/148361

  •  02-07-2019
  •  | 
  •  

题

我正在构建一个应用程序，我希望能够单击由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中使用它。

有帮助吗？

解决方案

排序 - 我将tabindex属性添加到目标DIV，这会导致它拾取键盘事件，例如

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

从 http：//www.w3收集的信息.ORG / WAI / GL / WCAG20 / WD-WCAG20-TECHS / SCR29.html

其他提示

保罗的回答很好，但你也可以使用contentEditable，就像这样...... 

document.getElementById('inner').contentEditable=true;
document.getElementById('inner').focus();

在某些情况下可能更好。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top