禁用的元素在chrome和firefox中获得焦点

Question

我正在使用img标签。通常图像不包含在TAB导航流程中。所以我设置了＆＃34; tabindex＆＃34; img标记的属性为0，以便它包含在流中。我禁用了它。在这种情况下，在IE中，这个img没有得到关注。而在FF和Chrome中，它虽然被禁用但仍会聚焦。我的观察是，tabindex = 0的元素虽然已启用或禁用，但仍包含在webkit的TAB导航流中。

如何克服这一点。

原始代码：

<img id="_arrowdown" tabindex='0' src="icons/ArrowDown.png"/> 

尝试修复：

<img id="_arrowdown" tabindex='0' src="icons/ArrowDown.png" onFocus="if(document.getElementById('_arrowdown').disabled == true){return false;}" disabled='true'>

但是这个修复工作并不起作用。

Answer 1

您可以在设置tabindex=-1时设置disabled，在启用img时设置tabindex=0。 这样可以防止图像仅在被禁用时聚焦。

Answer 2

您可以添加

img:focus {
outline-width: 0;
}

Fiddle

更新了适用于已停用img

的fiddle

Answer 3

首先，disabled不是<img>的有效HTML 5属性 - 无论如何它意味着什么？如果您要设置自定义属性，请使用data-*，例如data-mydisabled。

正确的方法是设置tabindex=-1。

这将再次从标签流中删除图像。