<легенда> не получит: фокус события?

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" позволяет элементам помимо ссылок и элементов формы получать фокус программно