Which HTML elements can receive focus?

html focus
Paul Turner picture Paul Turner · Oct 21, 2009 · Viewed 136.7k times · Source

I'm looking for a definitive list of HTML elements which are allowed to take focus, i.e. which elements will be put into focus when focus() is called on them?

I'm writing a jQuery extension which works on elements that can be brought into focus. I hope the answer to this question will allow me to be specific about the elements I target.

Answer

bobince picture bobince · Oct 21, 2009

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.

Related questions

How can I set focus on an element in an HTML form using JavaScript?

I have a web form with a text box in it. How do I go about setting focus to the text box by default? Something like this: <body onload='setFocusToTextBox()'> so can anybody help me with it? …

Read More
How to focus on a form input text field on page load using jQuery?

This is probably very simple, but could somebody tell me how to get the cursor blinking on a text box on page load?

Read More
Setting focus on an HTML input box on page load

I'm trying to set the default focus on an input box when the page loads (example: google). My page is very simple, yet I can't figure out how to do this. This is what I've got so far: <html&…

Read More