Как настроить фокусировку клавиатуры на DIV и добавить к ней обработчики событий клавиатуры? - PullRequest
Новая
       16

Как настроить фокусировку клавиатуры на DIV и добавить к ней обработчики событий клавиатуры?

80 голосов
/ 29 сентября 2008

Я создаю приложение, в котором я хочу иметь возможность щелкнуть прямоугольник, представленный 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.

Ответы [ 2 ]

154 голосов
/ 29 сентября 2008

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

5 голосов
/ 16 декабря 2011

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

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

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

...