<legend> 不会收到 :focus 事件？答案

【问题标题】：<legend> won't receive :focus event?<legend> 不会收到 :focus 事件？
【发布时间】：2014-07-23 13:07:14
【问题描述】：

这是 HTML：

              <fieldset>
                <legend>FieldsetName</legend>
                <div></div>
              </fieldset>

这是 CSS：

legend:focus {
  background-color: #ffddbe;
  outline: none; 
}
legend.focusin {
  background-color: #ffddbe;
  outline: none; 
}

点击它不会做任何事情。

好吧，我想，我会使用 jQuery。

$('legend').focusin( function() {
    $(this).addClass('focusin');
    });

$('legend').focusout( function() {
    $(this).removeClass('focusin');
});

这也无济于事。但是，如果 $('legend') 听“click”，它会做它应该做的事情。什么给了？

【问题讨论】：

标签： jquery html css focus focusin

【解决方案1】：

不确定它是否是正确的修复，但添加一个 tabIndex 修复它

<legend tabIndex="1">FieldsetName</legend>

演示：Fiddle

【讨论】：

当，那是快速且正确的。不过，我仍然需要等待 11 分钟才能接受您的回答。 :)
@Arun - 你能解释一下为什么我们为那个图例标签提供 tabIndex="1" 吗？
@Sudharsan 使传奇成为focusable element

【解决方案2】：

最好使用 tabindex="0"。

<legend tabindex="0">FieldsetName</legend>

以下是可能的 tabindex 值和用例的细分：

tabindex="0" 允许元素按照其在 DOM 中出现的顺序接收焦点。
tabindex="1"（或任何大于 1 的数字）定义明确的跳位顺序。这几乎总是一个坏主意。
tabindex="-1" 允许链接和表单元素以外的元素以编程方式接收焦点

【讨论】：