Wie kann ich einem DIV den Tastaturfokus geben und Keyboard-Event-Handler anfügen?
Baue ich eine Anwendung, wo ich möchte in der Lage sein, um Sie auf ein Rechteck repräsentiert durch ein DIV-Element, und verwenden Sie dann die Tastatur zu bewegen, dass DIV von listing für Tastatur-Ereignisse.
Anstatt einen Ereignis-listener für diese Tastatur-Ereignisse auf der Dokumentebene, kann ich hören, für Tastatur-events an der DIV-Ebene, vielleicht, indem Sie den Tastatur-Fokus?
Hier ist ein Vereinfachtes Beispiel um das problem zu veranschaulichen:
<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>
Klick auf den inneren DIV ich versuchen, um es zu fokussieren, aber nachfolgende Tastatur-Ereignisse werden immer abgeholt, auf der Dokument-Ebene, nicht auf meine DIV-level-event-listener.
Tun, ich muss einfach zu implementieren, eine Anwendungs-spezifische Begriff der Tastatur-Fokus?
Ich sollte hinzufügen, ich brauche nur dies funktioniert in Firefox.
focus()
Funktion. InformationsquelleAutor der Frage Paul Dixon | 2008-09-29
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sortiert - ich tabindex-Attribut Hinzugefügt, um das Ziel-DIV, wodurch es zu Holen, Tastatur-Ereignisse, zum Beispiel
Gewonnenen Informationen aus http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html
InformationsquelleAutor der Antwort Paul Dixon
Paul ' s Antwort funktioniert gut, aber man könnte auch mit contentEditable, wie diese...
Könnte besser sein in einigen Fällen.
InformationsquelleAutor der Antwort Peter Bagnall