Jak Mogę ustawić ostrość klawiatury na DIV I dołączyć do niego procedury obsługi zdarzeń klawiatury?

Buduję aplikację, w której chcę móc kliknąć prostokąt reprezentowany przez DIV, a następnie użyć klawiatury, aby przenieść ten DIV poprzez listę zdarzeń klawiatury.

Zamiast używać detektora zdarzeń dla tych zdarzeń klawiatury na poziomie dokumentu, czy mogę słuchać zdarzeń klawiatury na poziomie DIV, być może poprzez nadanie mu ostrości klawiatury?

Oto uproszczona próbka ilustrująca problem: 

<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>

Po kliknięciu w wewnętrzny DIV staram się nadać mu ostrość, ale kolejne zdarzenia klawiatury są zawsze odbierane na poziomie dokumentu, a nie na moim słuchaczu zdarzeń na poziomie DIV.

Czy po prostu muszę zaimplementować specyficzne dla aplikacji pojęcie skupienia klawiatury?

Powinienem dodać, że potrzebuję tego tylko do pracy w Firefoksie.

Author: Paul Dixon, 2008-09-29
Source

2 answers

Sortowane - dodałem atrybut tabindex do docelowego DIV, co powoduje, że odbiera zdarzenia klawiatury, na przykład 

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

Informacje zebrane z http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

 148
Author: Paul Dixon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-29 13:15:30

ODPOWIEDŹ Pawła działa dobrze, ale można też użyć contentEditable, jak to...

document.getElementById('inner').contentEditable=true;
document.getElementById('inner').focus();
W niektórych przypadkach może być lepiej.
 5
Author: Peter Bagnall,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-16 02:30:07