우수한 사용자 경험을 위해서는 웹 사이트/웹 앱의 접근성 및 가용성과 기능이 중요합니다.
우리 웹 사이트가 잘 실행되면/경험이 좋으면 사용자는 그것을 알지 못하지만 우리가 잘하지 않을 때는 확실히 느낄 것입니다. 응용 프로그램 가용성 및 접근성의 중요한 부분은 입력 초점 처리이지만 개발자가 종종 간과하는 또 다른 시점입니다.
입력 포커스 처리가 열악한 예 : 링크를 클릭 한 후 창을 엽니 다. 더 나쁜 것은 모달 창의 요소에 초점을 맞추지 만 닫은 후에는 초점이 돌아 오지 않습니다. 이상적으로는 링크가 트리거 될 때 참조가 저장되고 커서는 새 창에 집중하고 창이 닫히면 커서를 뒤로 이동합니다.
그러나 현재 입력 커서가 문서를 통해 어떤 요소를 모른다면?
자바 스크립트
문서를 사용하기 쉽습니다.
코드 사본은 다음과 같습니다.
var focusedElement = Document.ActiveElement;
/* 예를 들어, 예 : 예 :
var triggerlement = document.ActiveElement;
myModal = 새로운 myModal ({
Onopen : function () {
this.container.focus ();
},
onclose : function () {
TriggerElement.focus ();
}
});
*/
이 속성은 일반 입력 요소에서도 사용할 수있을뿐만 아니라 양식 필드 또는 <a> 태그 링크도 포함되지만 TabIndex 속성 세트가있는 모든 요소를 사용할 수 있습니다.
내가 Document.ActiveElement를 좋아하는 이유는 요소를 추적하고 집중하기 위해 이벤트 청취 또는 대의원을 사용할 필요가 없기 때문입니다. 언제든지이 속성을 얻을 수 있습니다. 물론 이러한 기능을 사용하기 전에 브라우저 크로스 또는 레이스 조건에 버그가 있는지 여부에 관계없이 많은 테스트를 수행해야합니다. 대체로, 나는 그것에 매우 만족하고 그것을 매우 신뢰할 수 있다고 생각합니다!