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

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

73811 次浏览
小开
最佳答案

Sorted - I added tabindex attribute to the target DIV, which causes it to pick up keyboard events, for example

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

Information gleaned from http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

小开

Paul's answer works fine, but you could also use contentEditable, like this...

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

Might be preferable in some cases.


提交答案