키보드에 초점을 맞추고 키보드 이벤트 핸들러를 첨부하려면 어떻게해야합니까?

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

  •  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();

경우에 따라 바람직 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top