Je construis une application dans laquelle je veux 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 clavier.
Plutôt que d'utiliser un récepteur d'événements pour ces événements clavier au niveau du document, puis-je écouter les événements clavier au niveau du 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>Lorsque je clique sur le DIV interne, j'essaie de lui donner le focus, mais les événements clavier suivants sont toujours pris au niveau du document, et non au niveau de mon écouteur d'événements de DIV.
Dois-je simplement implémenter une notion de focus clavier spécifique à l'application ?
Je dois ajouter que j'ai seulement besoin que cela fonctionne dans Firefox.
0 votes
Duplicata possible de Est-il possible de mettre l'accent sur une <div> en utilisant la fonction javascript focus() ?
1 votes
Ce n'est pas vraiment un doublon - la question a été posée deux ans auparavant, et il s'agit de savoir comment recevoir des événements clavier sur des éléments arbitraires, plutôt que d'utiliser la fonction
focus()función.