jquery - 不会收到 :focus 事件？

Question

这是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”，它会做它应该做的事情。是什么赋予了？

Answer 1

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

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

演示：小提琴

Answer 2

最好使用 tabindex="0"。

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

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

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