포커스 가능 요소를 웹킷에서 unfocusable으로 만듭니다.

Question

노드에 tabIndex 설정 (-1 이외)이 있으면 포커스를 클릭하면 포커스가 설정됩니다. tabIndex 설정을 제거하면 해당 동작이 중지되므로 클릭이 영향을 미치지 않습니다.

그러나 webkit에서는 노드에 tabIndex가 있으면 tabIndex를 제거한 후에도 노드를 계속 클릭하고 포커스를받을 수 있습니다. tabIndex = -1로 설정하면 동일한 클릭 문제가 발생합니다.

누구나이 문제의 해결 방법을 알고 계십니까?

<div id="one">one (no initial tabindex)</div> 
<div id="two" tabindex=0>two (initially tabindex=0)</div> 
<button type=button onclick="document.getElementById('one').setAttribute('tabindex', 0)">set tabindex on first div</button> 
<button type=button onclick="document.getElementById('one').removeAttribute('tabindex', 0)">remove tabindex on first div</button> 
<button type=button onclick="document.getElementById('two').removeAttribute('tabindex', 0)">remove tabindex on second div</button> 
<button type=button onclick="document.getElementById('one').setAttribute('tabindex', -1)">set tabindex=1 on first div</button> 
<button type=button onclick="document.getElementById('two').setAttribute('tabindex', -1)">set tabindex=1 on second div</button> 

Answer 1

removeAttribute에서 두 번째 매개 변수를 제거해보십시오. 당신은 다음과 같은 것을 얻습니다 :

<div id="one">one (no initial tabindex)</div> 
<div id="two" tabindex=0>two (initially tabindex=0)</div> 
<button type=button onclick="document.getElementById('one').setAttribute('tabindex', 0)">set tabindex on first div</button> 
<button type=button onclick="document.getElementById('one').removeAttribute('tabindex')">remove tabindex on first div</button> 
<button type=button onclick="document.getElementById('two').removeAttribute('tabindex')">remove tabindex on second div</button> 
<button type=button onclick="document.getElementById('one').setAttribute('tabindex', -1)">set tabindex=1 on first div</button> 
<button type=button onclick="document.getElementById('two').setAttribute('tabindex', -1)">set tabindex=1 on second div</button> 

어떻게 당신을 위해 일하는지 알려주세요.

Answer 2

요소에 집중하지 않도록하는 한 가지 방법은 onfocus 이벤트를 사용하는 것입니다.

예를 들어 element.onfocus = function() { this.blur(); }이지만 TAB을 통한 탐색이 쓸모 없으므로 바람직하지 않습니다. .blur()은 현재 색인을 재설정하므로 해당 요소에 도달하면 TABbing은 0부터 시작합니다.

대체 방법으로는 focusable element을 찾고 전체적으로 흐리게 처리하지 않고 집중할 수 있습니다. 이것 역시 Shift + Tab을 깨뜨린 것이므로 여전히 권장하지 않습니다.

이 상황을 해결하기 위해 내가 생각할 수있는 유일한 방법은 직접 WebKit에서 수정하거나 수정 될 때까지 기다리는 것입니다.