Я создаю приложение, в котором я хочу иметь возможность щелкнуть прямоугольник, представленный DIV, а затем использовать клавиатуру для перемещения этого DIV путем перечисления событий клавиатуры.
Вместо того, чтобы использовать прослушиватель событий для этих событий клавиатуры на уровне документа, могу ли я прослушивать события клавиатуры на уровне DIV, возможно, предоставив ему фокус клавиатуры?
Вот упрощенный пример, иллюстрирующий проблему:
<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>
Щелкнув внутренний DIV, я пытаюсь сфокусировать его, но последующие события клавиатуры всегда выбираются на уровне документа, а не на моем прослушивателе событий уровня DIV.
Мне просто нужно реализовать понятие фокуса клавиатуры для конкретного приложения?
Я должен добавить, что мне это нужно только для работы в Firefox.
источник
focus()функцию.Ответы:
Сортировано - я добавил атрибут tabindex к целевому DIV, который заставляет его, например, собирать события клавиатуры.
<div id="inner" tabindex="0"> this div can now have focus and receive keyboard events </div>Информация взята из http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html
источник
outline: 0px solid tranparent;. См .: stackoverflow.com/a/2260788/402807tabindex="-1", что также предотвратит получение пунктирной границы.tabindex. Этот ответ устарел?outlineних невозможно. если вам не нравится, как он выглядит, я рекомендую дать другое визуальное указание на то, что элемент сфокусирован, прежде чем избавляться отoutlineОтвет Пола работает нормально, но вы также можете использовать contentEditable, например ...
document.getElementById('inner').contentEditable=true; document.getElementById('inner').focus();В некоторых случаях может быть предпочтительнее.
источник