在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

嘗試從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()復位當前索引，因此一旦達到該元件中，互聯從0

的替代開始可以找到下一個focusable element和焦點賦予它，而不是完全模糊。這也算是打破了Shift + Tab，所以還是不推薦。

我能想到解決這種情況的唯一方法是自己修復WebKit或等待它被修復。