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

StackOverflow https://stackoverflow.com/questions/148361

  •  02-07-2019
  •  | 
  •  

Question

Je construis une application dans laquelle je veux pouvoir cliquer sur un rectangle représenté par une DIV, puis utiliser le clavier pour déplacer cette DIV en listant les événements de clavier.

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

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 la DIV interne, j'essaie de lui donner le focus, mais les événements de clavier ultérieurs sont toujours capturés au niveau du document, et non par mon écouteur d'événements de niveau DIV.

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

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

Était-ce utile?

La solution

Trié - J'ai ajouté l'attribut tabindex à la DIV cible, ce qui lui permet de détecter les événements de clavier, par exemple

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

Informations recueillies dans http: //www.w3 .org / WAI / GL / WCAG20 / WD-WCAG20-TECHS / SCR29.html

Autres conseils

La réponse de Paul fonctionne bien, mais vous pouvez aussi utiliser contentEditable, comme ceci ... 

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

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top