Buduję aplikację, w której chcę mieć możliwość kliknięcia prostokąta reprezentowanego przez DIV, a następnie użyj klawiatury, aby przenieść ten DIV, wyświetlając zdarzenia klawiatury.
Zamiast używać detektora zdarzeń dla tych zdarzeń klawiatury na poziomie dokumentu, czy mogę nasłuchiwać zdarzeń klawiatury na poziomie DIV, być może poprzez ustawienie fokusu na klawiaturze?
Oto uproszczony przykład ilustrujący 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 wewnętrznego DIV staram się nadać mu fokus, ale kolejne zdarzenia klawiatury są zawsze odbierane na poziomie dokumentu, a nie na moim odbiorniku zdarzeń na poziomie DIV.
Czy muszę po prostu zaimplementować specyficzne dla aplikacji pojęcie fokusu na klawiaturze?
Powinienem dodać, że potrzebuję tego tylko do pracy w Firefoksie.