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

使焦点元素在webkit上不可聚焦

2 个答案: