DIV에 키보드 포커스를주고 여기에 키보드 이벤트 핸들러를 연결하려면 어떻게해야합니까?


83

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에서 작동하려면이 기능 만 필요합니다.



1
실제로 속이는 것은 아닙니다. 2 년 전에 질문했고, 이것은 focus()함수를 사용하는 대신 임의의 요소에 대한 키보드 이벤트를받는 방법을 묻는 것 입니다.
Paul Dixon

답변:


165

정렬 됨-대상 DIV에 tabindex 속성을 추가하여 예를 들어 키보드 이벤트를 선택합니다.

<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 에서 수집 한 정보


6
또한 div에 초점이 맞춰 졌을 때 파란색 점선 테두리가 표시되는 것을 원하지 않는 경우 스타일을 지정할 수 있습니다 outline: 0px solid tranparent;. 참조 : stackoverflow.com/a/2260788/402807
AlcubierreDrive

4
또는 설정 tabindex="-1"하면 점선 테두리가 생기지 않습니다.
troglobit

Chrome 60 및 FF 54에서는이 기능이 전혀 작동하지 않습니다. IE11은 tabindex. 이 답변이 구식입니까?
jlh

이것은 현재 Firefox에서 작동하지 않습니다. 브라우저는 키보드 입력을 처리합니다. 바이올린도 마찬가지입니다.
Kwebble

1
제거하는 outline것은 액세스 할 수 없습니다. 당신이 보이는 방법이 마음에 들지 않는다면, 나는 요소가 제거하기 전에 중점을두고 몇 가지 다른 시각적 표시를 제공하는 것이 좋습니다outline
sleeparrow

5

Paul의 대답은 잘 작동하지만 다음과 같이 contentEditable을 사용할 수도 있습니다.

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

어떤 경우에는 더 좋을 수 있습니다.


6
이 작업을 수행하면 Chrome 17은 포커스가있는 요소에 커서를 놓고 요소에 항목을 입력 할 수 있습니다. 나는 이것을 추천하지 않을 것입니다.
Seppo Erviälä 2012

1
@Seppo, 좋은 지적입니다. 키보드 이벤트를 사용하는 경우 반드시 편집 할 수는 없지만 수행하려는 작업에 따라 커서가 지저분해질 수 있습니다. 덧붙여, 그냥 크롬 17은 아니지만, 거의이 방식으로 작동하는 모든 최근의 브라우저 - 확실히 FF 및 사파리 - 내가 그 최근에 테스트하지했습니다 있지만 IE가 너무 나는 믿는다
피터 Bagnall
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.