web-dev-qa-db-fra.com

Comment puis-je donner le focus clavier à un DIV et y attacher des gestionnaires d'événements clavier?

Je crée une application dans laquelle je souhaite pouvoir cliquer sur un rectangle représenté par un DIV, puis utiliser le clavier pour déplacer ce DIV en répertoriant les événements du clavier.

Plutôt que d'utiliser un écouteur d'événements pour ces événements clavier au niveau du document, puis-je écouter les événements clavier au niveau DIV, peut-être en lui donnant le focus clavier?

Voici un exemple simplifié pour illustrer le problème:

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

En cliquant sur le DIV intérieur, j'essaie de lui donner le focus, mais les événements de clavier suivants sont toujours captés au niveau du document, pas mon écouteur d'événements de niveau DIV.

Dois-je simplement implémenter une notion spécifique à l'application de focus clavier?

Je dois ajouter que je n'ai besoin que de cela pour fonctionner dans Firefox.

javascripteventskeyboard
80
Paul Dixon

Trié - J'ai ajouté un attribut tabindex à la DIV cible, ce qui provoque la récupération des événements du clavier, par exemple

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

Informations glanées auprès de http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

156
Paul Dixon

La réponse de Paul fonctionne très bien, mais vous pouvez également utiliser contentEditable, comme ceci ...

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

Peut être préférable dans certains cas.

5
Peter Bagnall