¿Cómo puedo enfocar el teclado en un DIV y adjuntarle controladores de eventos de teclado?
Estoy creando una aplicación en la que quiero poder hacer clic en un rectángulo representado por un DIV y luego usar el teclado para mover ese DIV al enumerar los eventos del teclado.
En lugar de usar un detector de eventos para esos eventos de teclado en el nivel de documento, ¿puedo escuchar los eventos de teclado en el nivel de DIV, tal vez al darle énfasis al teclado?
Aquí hay una muestra simplificada para ilustrar el problema:
<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>
Al hacer clic en el DIV interno, trato de enfocarlo, pero los sucesos de teclado subsiguientes siempre se seleccionan en el nivel del documento, no el detector de eventos del DIV.
¿Necesito simplemente implementar una noción de enfoque de teclado específica de la aplicación?
Debo agregar que solo necesito esto para trabajar en Firefox.