javascript - pulsada - ¿Cómo puedo centrar el teclado en un DIV y anexar controladores de eventos de teclado?
keyup javascript (2)
Estoy construyendo una aplicación en la que quiero hacer clic en un rectángulo representado por un DIV, y luego uso el teclado para mover ese DIV haciendo una lista de eventos de teclado.
En lugar de usar un detector de eventos para esos eventos de teclado en el nivel de documento, ¿puedo escuchar eventos de teclado en el nivel DIV, tal vez dándole el foco de 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 eventos de teclado subsiguientes siempre se recogen en el nivel del documento, no en el detector de eventos del nivel DIV.
¿Simplemente necesito implementar una noción específica de la aplicación sobre el enfoque del teclado?
Debo agregar que solo necesito esto para trabajar en Firefox.
La respuesta de Paul funciona bien, pero también puedes usar contentEditable, así ...
document.getElementById(''inner'').contentEditable=true;
document.getElementById(''inner'').focus();
Podría ser preferible en algunos casos.
Ordenado: agregué el atributo tabindex al DIV objetivo, lo que hace que capte eventos del teclado, por ejemplo
<div id="inner" tabindex="0">
this div can now have focus and recieve keyboard events
</div>
Información recopilada de http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html