Firefox忽略<img/>上的tabindex 0

Question

我有javascript，最终看起来像这样：

<input type="text" name="from" size="12" id="from" maxlength="12" value="" placeholder="dd-Mon-yyyy" class="hasDatepicker">
<img class="ui-datepicker-trigger" src="/img/calendar_icon_20x20.png" alt="" title="select start date" role="button" tabindex="0">

<input type="text" name="thru" size="12" id="thru" maxlength="12" value="" placeholder="dd-Mon-yyyy" dd-mon-yyyy'="" class="hasDatepicker">
<img class="ui-datepicker-trigger" src="/img/calendar_icon_20x20.png" alt="" title="select end date" role="button" tabindex="0">

但是当在Firefox中浏览页面时，它会从<input>上的<img>跳到下一个<input>。它在Chrome，Safari和Opera中都很完美（都是当前版本）。

有什么想法吗？

Answer 1

正如您所发现的，TabIndex并未以标准方式实施。但是，可以肯定地说它只与可聚焦元素相关。图像元素无法获得焦点。

来自MDN：

  

tabindex全局属性是一个整数，表示该元素   如果它应该参与，可以采取输入焦点（可聚焦）   顺序键盘导航，如果是，在什么位置。它可以   取几个值...

而且，当您调查HTML Global Attributes时，您会找到文档告诉我们：

  

全局属性是所有HTML元素共有的属性;他们能   用于所有元素，虽然属性可能没有影响   一些元素。

通常，tabindex用于表单元素（文本框，复选框，单选按钮，按钮等），以帮助导航数据输入。