如何为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中工作。

javascript events keyboard

— 保罗·迪克森
source

可能的重复项是否可以使用javascript focus（）函数将焦点放在<div>上？

— 蒂姆·马隆

并不是真正的骗子-它问了两年前，这是在问如何接收任意元素上的键盘事件，而不是使用该focus()函数。

— Paul Dixon

Answers:

165

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

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

信息可从http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html获得

— 保罗·迪克森
source

另外，如果您不希望div聚焦时获得虚线的蓝色边框，则可以设置其样式outline: 0px solid tranparent;。请参阅：stackoverflow.com/a/2260788/402807

— AlcubierreDrive

或设置tabindex="-1"，这也将阻止其获得虚线边框。

— troglobit

我无法在Chrome 60和FF 54中完全使用此功能tabindex。即使没有IE11，IE11也会神奇地完成正确的操作。这个答案过时了吗？

— jlh

在当前的Firefox中，这对我不起作用。浏览器处理键盘输入。小提琴也一样。

— Kwebble

摆脱outline不可访问。如果您不喜欢它的外观，我建议您给出一些视觉上的指示，以指出该元素在摆脱之前已被聚焦outline

— sleeparrow 18/09/11

保罗的答案很好，但您也可以使用contentEditable，如下所示：

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

在某些情况下可能更可取。

— 彼得·巴格纳尔
source

如果执行此操作，Chrome 17会将光标放在焦点对准的元素上，然后可以在该元素上键入内容。我不推荐这个。

— SeppoErviälä2012年

@Seppo，这很不错。如果您正在使用键盘事件，则不一定可以进行编辑，但是根据您要执行的操作，使用光标可能会很杂乱。顺便说一句，这不只是铬17，但相当多，它们的行为这种方式，所有最新的浏览器-当然，FF和Safari浏览器- IE也相信，虽然我没有在最近测试

— 彼得·巴格诺尔