BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] DIVにキーボードフォーカスを与え、キーボードイベントハンドラを付けるにはどうすればよいですか？

2023-06-12 23:15:22

質問

私は、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>

から得られる情報 http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します