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

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

javascript events keyboard

Javascript 如何将键盘焦点赋予DIV并将键盘事件处理程序附加到它？,javascript,events,keyboard,Javascript,Events,Keyboard,我正在构建一个应用程序，希望能够单击由DIV表示的矩形，然后使用键盘通过列出键盘事件来移动该DIV 我是否可以在DIV级别监听键盘事件，而不是在文档级别使用事件监听器来监听这些键盘事件，可能是通过赋予它键盘焦点下面是一个简化示例来说明问题： <html> <head> </head> <body> <div id="outer" style="background-color:#eeeeee;padding:10px"> outer

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


外面的
希望能够聚焦此元素并拾取按键
函数onClick（）
{
document.getElementById（'inner'）.innerHTML=“单击”；
document.getElementById（'inner'）.focus（）；
}
//从未调用此处理程序
函数onKeypressDiv（）
{
document.getElementById（'inner'）.innerHTML=“按div键”；
}
函数onKeypressDoc（）
{
document.getElementById（'inner'）.innerHTML=“文档上的按键”；
}
//安装事件处理程序
document.getElementById（'inner'）.addEventListener（“单击”，onClick，false）；
document.getElementById（'inner'）。addEventListener（“keypress”，onKeypressDiv，false）；
文件。添加了文本列表（“按键”，onKeypressDoc，false）；

在单击内部DIV时，我试图使其成为焦点，但随后的键盘事件总是在文档级别拾取，而不是我的DIV级别事件侦听器

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

我应该添加我只需要在Firefox中使用它。

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

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


此div现在可以具有焦点并接收键盘事件

从Paul的答案中收集到的信息效果很好，但您也可以使用contentEditable，如下所示

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

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

如果您这样做，Chrome 17会将光标放在焦点上的元素上，您可以在该元素上键入内容。我不推荐这个。@Seppo，这是一个很好的观点。如果您正在使用键盘事件，则不一定能够进行编辑，但根据您尝试执行的操作，光标可能会变得混乱。顺便说一句，这不仅仅是Chrome 17，而且几乎所有最近的浏览器都是如此——当然是FF和Safari——我也相信，虽然我最近没有测试过，但是如果你不希望div在聚焦时有点蓝色边框，你可以为它设置样式

outline:0px solid-transparent。请参阅：或设置tabindex=“-1”
，这也将阻止它获得虚线边框。我在Chrome 60和FF 54中根本无法实现这一点。即使没有tabindex
，IE11也神奇地做了正确的事情。这个答案过时了吗？这在当前的Firefox中对我不起作用。浏览器处理键盘输入。小提琴也一样。无法摆脱大纲。如果您不喜欢它的外观，我建议您在去掉大纲
可能的不完全重复的元素之前，提供一些其他视觉指示，表明该元素已聚焦-它在两年前询问过，这是询问如何接收任意元素上的键盘事件，而不是使用聚焦（）
功能。