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

它也没有帮助。但是，如果$（＆＃39; legend＆＃39;）收听＆＃34;点击＆＃34;，它会执行它应该执行的操作。是什么给了什么？

Answer 1

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

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

演示：Fiddle

Answer 2

最好使用tabindex =“0”。

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

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

tabindex =“0”允许元素按照它在DOM中出现的顺序获得焦点。
tabindex =“1”（或任何大于1的数字）定义显式Tab键顺序。这几乎总是一个坏主意。
tabindex =“ - 1”允许除链接和表单元素之外的元素以编程方式接收焦点

<legend>将不会收到：焦点事件？</legend>

2 个答案: