Как я могу дать фокус клавиатуры 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 I попробуйте дать ему фокус, но последующие события клавиатуры всегда подбираются на уровне документа, а не моего прослушивателя событий уровня DIV.

Мне просто нужно реализовать прикладное понятие фокуса клавиатуры?

Я должен добавить, что мне это нужно только для работы в Firefox.

2 79
javascript events keyboard-shortcuts

2 ответа:

сортировка-я добавил атрибут 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

148

ответ Павла работает нормально, но вы также можете использовать contentEditable, как это...

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

может быть предпочтительнее в некоторых случаях.

5