<legend>不会收到:焦点事件？

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');
});

也没什么用。然而，如果$(‘传奇’)听“点击”，它会做它应该做的事情。怎么回事？

Answer 1

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

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

演示：小提琴

Answer 2

最好使用tabindex="0“。

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

下面是可能的表索引值和用例的细目：

• tabindex="0“允许元素按照它在DOM中出现的顺序接收焦点。
• tabindex="1“(或任何大于1的数字)定义了显式的制表符顺序。这几乎总是个坏主意。
• tabindex="-1“允许除链接和表单元素之外的元素以编程方式接收焦点。