반응형
DIV에 키보드 포커스를주고 여기에 키보드 이벤트 처리기를 연결해야합니까?
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에서 작동하는 기능 만 필요합니다.
정렬 됨-대상 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 에서 수집 한 정보
Paul의 대답은 잘 작동하지만 다음과 같이 contentEditable을 사용할 수도 있습니다.
document.getElementById('inner').contentEditable=true;
document.getElementById('inner').focus();
어떤 경우에는 더 좋을 수 있습니다.
반응형
'ProgramingTip' 카테고리의 다른 글
| matplotlib에서 x 축 변경 (0) | 2020.10.07 |
|---|---|
| 콘솔 오류. (0) | 2020.10.07 |
| HTML 이메일 작성시 모범 사례 및 고려 사항 (0) | 2020.10.07 |
| HTML5를 사용하여 클라이언트 확인 파일 크기? (0) | 2020.10.07 |
| GDB 중단 점을 지정된 횟수에 도달 한 후에 만 중단하는 방법은 무엇입니까? (0) | 2020.10.07 |