在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或等待它被修复。