web-dev-qa-db-ja.com

DIVにキーボードフォーカスを与え、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で動作するために必要なだけです。

javascripteventskeyboard
80
Paul Dixon

ソート済み-ターゲットDIVにtabindex属性を追加しました。これにより、キーボードイベントがピックアップされます。たとえば、

<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 から収集した情報

156
Paul Dixon

ポールの答えはうまくいきますが、このようにcontentEditableを使用することもできます...

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

場合によっては好ましいかもしれません。

5
Peter Bagnall