сделать фокусируемый элемент несфокусируемым на webkit

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

Одним из способов избежать фокусировки на элементах является использование события onfocus.

Например, element.onfocus = function () { this.blur(); }, но это нежелательно, поскольку делает навигацию через TAB бесполезной. .blur() сбрасывает текущий индекс, поэтому, как только он достигает этого элемента, табуляция начинается с 0.

Альтернативой может быть поиск следующего фокусируемого элемента и придание ему фокуса, а не размытие целиком. Это, думал, также ломает shift + tab, так что это все еще не рекомендуется.

Единственный способ решить эту ситуацию - это исправить ее самостоятельно в WebKit или подождать, пока она будет исправлена.

Answer 2

Попробуйте удалить второй параметр из 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>

Дайте мне знать, как у вас работает.