Wie kann ich den Tastaturfokus auf ein DIV geben und Tastatur Event-Handler es anhängen?

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

  •  02-07-2019
  •  | 
  •  

Frage

Ich baue eine Anwendung, wo ich in der Lage sein wollen, ein Rechteck von einem DIV dargestellt zu klicken, und dann die Tastatur verwenden, um diese DIV zu bewegen, indem für Tastaturereignisse auflistet.

Anstatt ein Ereignis-Listener für die Tastaturereignisse auf Dokumentebene verwenden, kann ich für Tastaturereignisse in der DIV-Ebene hören, vielleicht, indem sie es den Tastaturfokus zu geben?

Hier ist ein vereinfachtes Beispiel zur Veranschaulichung des Problems: 

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

Auf den inneren DIV klicken Ich versuche, es zu konzentrieren, aber nachfolgende Tastaturereignisse werden immer auf Dokumentebene aufgenommen, nicht mein DIV-Ebene Ereignis-Listener.

Habe ich einfach ein anwendungsspezifisches Konzept des Tastaturfokus implementieren muß?

Ich sollte hinzufügen, ich nur diese müssen in Firefox arbeiten.

War es hilfreich?

Lösung

Sortiert - habe ich tabindex-Attribut zum Ziel DIV, die es Tastaturereignisse zu holen verursacht, zum Beispiel 

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

Informationen nachgelesen von http: //www.w3 .org / WAI / GL / WCAG20 / WD-WCAG20-TECHS / SCR29.html

Andere Tipps

Die Antwort des Paulus funktioniert gut, aber man könnte auch contentEditable verwenden, so ... 

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

In einigen Fällen könnte vorzuziehen sein.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top