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

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

而不是在文档级别使用事件监听器来处理那些键盘事件,我可以在DIV级别监听键盘事件,也许是通过给予键盘焦点？

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

outer

   

   want to be able to focus this element and pick up keypresses
   

在单击内部DIV时,我尝试给它焦点,但随后的键盘事件总是在文档级别而不是我的DIV级别事件侦听器中被选中.

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

我应该补充一下,我只需要在Firefox中使用它.

1> Paul Dixon..：

---

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

    this div can now have focus and receive keyboard events

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

---

另外,如果你不希望div在聚焦时得到一个带点的蓝色边框,你可以设置它的样式`outline:0px solid tranparent;`.请参阅:http://stackoverflow.com/a/2260788/402807

2> Peter Bagnal..：

---

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

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

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

---

如果您这样做,Chrome 17会将光标放在焦点上的元素上,您可以在元素上键入内容.我不推荐这个.