키보드에 초점을 맞추고 키보드 이벤트 핸들러를 첨부하려면 어떻게해야합니까?
-
02-07-2019 - |
문제
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에서 작동하기 위해서만 추가해야합니다.
해결책
정렬 - TARDINDEX 속성을 대상 DIV에 추가하여 키보드 이벤트를 선택합니다.
<div id="inner" tabindex="0">
this div can now have focus and recieve keyboard events
</div>
정보가 수집되었습니다 http://www.w3.org/wai/gl/wcag20/wd-wcag20-techs/scr29.html
다른 팁
Paul의 대답은 잘 작동하지만 이와 같이 만족스러운 사용할 수 있습니다 ...
document.getElementById('inner').contentEditable=true;
document.getElementById('inner').focus();
경우에 따라 바람직 할 수 있습니다.
제휴하지 않습니다 StackOverflow