won't receive :focus event?

Question

Here is the HTML:

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

Here is the CSS:

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

Clicking on it doesn't do anything.

OK, I thought, I'll go with jQuery.

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

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

It doesn't help either. However, if $('legend') listens to "click", it does what it is supposed to do. What gives?

score 2 · Accepted Answer · answered Jul 23 '14 at 13:09

2

Not sure whether it is the correct fix, but adding a tabIndex fixes it

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

Demo: Fiddle

answered Jul 23 '14 at 13:09

Arun P Johny

384,651
66
527
531

Dang, that was fast AND correct. I still have to wait 11 minutes to accept your answer, though. :) – pop Jul 23 '14 at 13:10
@Arun - Can you explain why we give the tabIndex="1" for that legend tag? – Sudharsan S Jul 23 '14 at 13:15
@Sudharsan that makes the legend a [focusable element](http://stackoverflow.com/questions/6754275/set-keyboard-focus-to-a-div) – Arun P Johny Jul 23 '14 at 13:23

score 1 · Answer 2 · answered May 23 '16 at 20:37

It's best to use tabindex="0".

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

Here's a breakdown of possible tabindex values and use cases:

tabindex="0" allows an element to receive focus in the order that it appears in the DOM.
tabindex="1" (or any number greater than 1) defines an explicit tab order. This is almost always a bad idea.
tabindex="-1" allows elements besides links and form elements to receive focus programmatically

won't receive :focus event?

2 Answers2