Which HTML elements can receive focus?
Solution 1:
There isn't a definite list, it's up to the browser. The only standard we have is DOM Level 2 HTML, according to which the only elements that have a focus()
method are
HTMLInputElement
, HTMLSelectElement
, HTMLTextAreaElement
and HTMLAnchorElement
. This notably omits HTMLButtonElement
and HTMLAreaElement
.
Today's browsers define focus()
on HTMLElement, but an element won't actually take focus unless it's one of:
- HTMLAnchorElement/HTMLAreaElement with an href
- HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement but not with
disabled
(IE actually gives you an error if you try), and file uploads have unusual behaviour for security reasons - HTMLIFrameElement (though focusing it doesn't do anything useful). Other embedding elements also, maybe, I haven't tested them all.
- Any element with a
tabindex
There are likely to be other subtle exceptions and additions to this behaviour depending on browser.
Solution 2:
Here I have a CSS-selector based on bobince's answer to select any focusable HTML element:
a[href]:not([tabindex='-1']),
area[href]:not([tabindex='-1']),
input:not([disabled]):not([tabindex='-1']),
select:not([disabled]):not([tabindex='-1']),
textarea:not([disabled]):not([tabindex='-1']),
button:not([disabled]):not([tabindex='-1']),
iframe:not([tabindex='-1']),
[tabindex]:not([tabindex='-1']),
[contentEditable=true]:not([tabindex='-1'])
{
/* your CSS for focusable elements goes here */
}
or a little more beautiful in SASS:
a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable=true]
{
&:not([tabindex='-1'])
{
/* your SCSS for focusable elements goes here */
}
}
I've added it as an answer, because that was, what I was looking for, when Google redirected me to this Stackoverflow question.
EDIT: There is one more selector, which is focusable:
[contentEditable=true]
However, this is used very rarely.
Solution 3:
$focusable:
'a[href]',
'area[href]',
'button',
'details',
'input',
'iframe',
'select',
'textarea',
// these are actually case sensitive but i'm not listing out all the possible variants
'[contentEditable=""]',
'[contentEditable="true"]',
'[contentEditable="TRUE"]',
'[tabindex]:not([tabindex^="-"])',
':not([disabled])';
I'm creating a SCSS list of all focusable elements and I thought this might help someone due to this question's Google rank.
A few things to note:
- I changed
:not([tabindex="-1"])
to:not([tabindex^="-"])
because it's perfectly plausible to generate-2
somehow. Better safe than sorry right? - Adding
:not([tabindex^="-"])
to all the other focusable selectors is completely pointless. When using[tabindex]:not([tabindex^="-"])
it already includes all elements that you'd be negating with:not
! - I included
:not([disabled])
because disabled elements can never be focusable. So again it's useless to add it to every single element.