f.contentWindow.focus();
}, 50)
// firefox 해킹
navigator.userAgent.toLowerCase() .indexOf('firefox') !== -1 && f.focus()
3. 페이지 DOM에 의해 생성된 유사 팝업 창: DOM의 경우
와 같은 포커스 가능 요소(W3C SPEC)를 제외하고는 포커스가 허용되지 않습니다. 그러면 div에 집중해야 할 때 어떻게 해야 할까요? 일반적으로 말하면
와 같은 포커스할 수 없는 요소가 포커스 이벤트를 트리거할 수 있도록 Tabindex를 설정할 수 있습니다. 하지만 우리가 원하는 것은 탭을 사용하여 이 영역의 콘텐츠에 액세스할 수 있도록 한 장소에 집중하는 것이므로 이 방법은 쓸모가 없습니다.
현재 (제가 생각하고 찾을 수 있는) 더 좋은 방법은 없으므로 지금은 포커스 대상을 생성하기 위해 포커스 가능한 요소만 사용할 수 있습니다. 이렇게 할 수 있습니다.
초점 맞추기 문제는 이 링크가 우리에게 아무런 영향을 미치지 않는다는 것입니다. 우리는 그것을 숨기고 그것에 집중해야 합니다. 하지만 display:none을 사용하면 포커스를 사용할 수 없습니다. 숨김에 관해서는 여기서 너무 많이 말하고 싶지 않습니다. 이 기사를 읽는 것이 좋습니다. 클립을 사용하여 콘텐츠 숨기기. 그런 다음 다음과 같이 링크를 해킹할 수 있습니다.
/ / html: 점선 상자를 제거하기 위해 hidefocus 사용 참고
포커스 가져오기 // CSS: 클립 사용
.getfocus{
위치:상대적;
clip:ect(1px 1px 1px 1px)
}
// javascript: 위에서 아래로 탭 이동을 용이하게 하려면 이 DOM 구조 앞에
를 넣어야 합니다.
a.focus()
3. 요약:
이제 중요한 기술 구현 사항을 명확하게 설명했습니다. 코드에 대해서는 이 조악한 DEMO를 참조하세요. 특별히 최적화되지 않은 코드 조각일 뿐이지만 많은 문제를 해결할 수 있다고 믿습니다. 접근성에 관해서는 아직 갈 길이 많이 남아 있습니다. 자, 오늘부터 조금씩.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
