Buduję aplikację, w której chcę mieć możliwość kliknięcia prostokąta reprezentowanego przez DIV, a następnie użyj klawiatury, aby przenieść ten DIV, wyświetlając zdarzenia klawiatury.
Zamiast używać detektora zdarzeń dla tych zdarzeń klawiatury na poziomie dokumentu, czy mogę nasłuchiwać zdarzeń klawiatury na poziomie DIV, być może poprzez ustawienie fokusu na klawiaturze?
Oto uproszczony przykład ilustrujący problem:
<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>
Po kliknięciu wewnętrznego DIV staram się nadać mu fokus, ale kolejne zdarzenia klawiatury są zawsze odbierane na poziomie dokumentu, a nie na moim odbiorniku zdarzeń na poziomie DIV.
Czy muszę po prostu zaimplementować specyficzne dla aplikacji pojęcie fokusu na klawiaturze?
Powinienem dodać, że potrzebuję tego tylko do pracy w Firefoksie.
źródło
focus()funkcji.Odpowiedzi:
Sorted - dodałem atrybut tabindex do docelowego DIV, co powoduje, że np. Odbiera zdarzenia z klawiatury
<div id="inner" tabindex="0"> this div can now have focus and receive keyboard events </div>Informacje zebrane z http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html
źródło
outline: 0px solid tranparent;. Zobacz: stackoverflow.com/a/2260788/402807tabindex="-1", to również zapobiegnie uzyskaniu przerywanej ramki.tabindex. Czy ta odpowiedź jest nieaktualna?outlinenie jest dostępne. jeśli nie podoba ci się wygląd, polecam dać inne wizualne wskazanie, że element jest skupiony, zanim pozbędziesz sięoutlineOdpowiedź Paula działa dobrze, ale możesz również użyć contentEditable, w ten sposób ...
document.getElementById('inner').contentEditable=true; document.getElementById('inner').focus();W niektórych przypadkach może być lepsze.
źródło