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

Question

我正在使用 img 标签。通常图像不会包含在 TAB 导航流程中。所以我将 img 标签的“tabindex”属性设置为 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

您可以添加

img:focus {
outline-width: 0;
}

Fiddle

已更新 fiddle，适用于残障人士 img

Answer 2

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

Answer 3

首先，disabled 不是 <img> 的有效 HTML 5 属性——它到底意味着什么？如果要设置自定义属性，请使用 data-*，如 data-mydisabled.

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

这会再次从选项卡流中删除图像。