Javascript : 대화 상자에서 트랩 포커스

Question

일부 입력 요소가 포함 된 팝업 대화 상자 (z- 인덱스가 높은 div)가 있습니다. 이 대화 상자가 열려있는 동안이 대화 상자의 요소 사이를 이동하기 위해 탭과 시프트 탭을 사용하고 싶습니다. 이것을 어떻게 할 수 있습니까?

Answer 1

tabIndex 속성을 사용하고 탭을 순환하고 싶지 않은 모든 요소에 대해 -1로 설정할 수 있습니다. 오프

<input type="text" id="no-tab-cycle" tabIndex="-1"/> 

물론 당신은 .. jQuery를 또는 무언가 일부 스마트 선택기를 통해이 동작을 관리해야하지만 양식이 얼마나 복잡한 의존합니다

어쩌면 다른 사람이 더 나은 대답을 가지고 ..

jQuery를 사용하여 팝업을 가정 샘플

와

Update는이 코드는 트릭을 할해야 내-팝업 대화의 ID를 가지고, C 선택기를 원하는대로 맞 춥니 다.

$('input, textarea, select').each(function(index) { 
    $(this).attr('tabIndex', '-1'); 
}); 

$('#my-popup-dialog input, #my-popup-dialog textarea, #my-popup-dialog select').each(function(index) { 
    $(this).removeAttr('tabIndex'); 
}); 

Answer 2

직접적인 방법은 없지만 여기서는 (다소 지저분한) 방법이 있습니다. 당신은 기본적으로 현재 포커스가있는 요소의 트랙을 유지해야합니다

1. 이 페이지의 모든 컨트롤에 대한 onfocus 이벤트를 처리를 (당신은이 작업을 자동으로 설정할 수 있습니다)와 처리기에서 요소의 메모를 확인하는 포커스를 받았다면 currentFocus이라고 부르 자.

2. 마찬가지로, onblur 이벤트를 처리하고 포커스를 잃은 요소를 기록한 다음 previousFocus이라고합시다.

3. 지금 당신이 원하는 않는 onfocus 핸들러에 추가 로직을 추가 : previousFocus이 대화 상자에서 마지막으로 제어하고 currentFocus 당신의 대화 외부 제어의 경우, 귀하의 대화에서 첫 번째 컨트롤에 포커스를 설정 -이 뜻을 마지막 컨트롤에서 탭핑을 처리하십시오. 이 논리를 반대로하면 첫 번째 컨트롤에서 시프트 탭을 처리 할 수 ​​있습니다.