我正在构建一个应用程序,我希望该应用程序能够单击由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中工作。
排序-我在目标DIV中添加了tabindex属性,这使它可以拾取键盘事件,例如
<div id="inner" tabindex="0"> this div can now have focus and receive keyboard events </div>