如何將鍵盤焦點放在DIV上並將鍵盤事件處理程序附加到它？

Question

我正在構建一個應用程序，我希望能夠單擊由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中使用它。

Answer 1

排序 - 我將tabindex屬性添加到目標DIV，這會導致它拾取鍵盤事件

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

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

Answer 2

保羅的答案很好，但你也可以使用contentEditable，就像這樣......

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

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

如何將鍵盤焦點放在DIV上並將鍵盤事件處理程序附加到它？

問題描述

2 個解決方案

解決方案1
156 已采納 2008-09-29 12:18:32

解決方案2
5 2011-12-16 02:30:07

如何將鍵盤焦點放在DIV上並將鍵盤事件處理程序附加到它？

問題描述

2 個解決方案

解決方案1 156 已采納 2008-09-29 12:18:32

解決方案2 5 2011-12-16 02:30:07

解決方案1
156 已采納 2008-09-29 12:18:32

解決方案2
5 2011-12-16 02:30:07