html - 使可聚焦元素在 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>

让我知道您的工作情况如何。