36

Is there any way to set focus to the document, i.e. the content area, in JavaScript? document.focus() doesn’t seem to do anything.

Timwi
  • 65,159
  • 33
  • 165
  • 230
  • Is that document inside the top-most window of a browser tab? Is that tab active (or in the background)? How exactly does focusing a document manifest itself? – Šime Vidas Aug 07 '11 at 23:28
  • 1. yes, 2. yes, 3. by having the arrow keys cause scrolling and by not having anything else focused, e.g. links, buttons, textboxes. – Timwi Aug 07 '11 at 23:33
  • I think you want `window.focus();`. Scrolling with arrow keys is enabled by focusing the window object... – Šime Vidas Aug 07 '11 at 23:39
  • It can't be done. Proof - open developer tools (e.g. in Chrome) and focus that and then try doing anything in javascript to wrest focus back to the actual document. – Michael Aug 09 '19 at 15:55

3 Answers3

52

In HTML 4.01, focus is only discussed in the context of elements such as form controls and links. In HTML 5, it is discussed much more widely. However, how focus works for documents is mostly browser dependent.

You might try:

// Give the document focus
window.focus();

// Remove focus from any focused element
if (document.activeElement) {
    document.activeElement.blur();
}

It is very well supported as well.

candidJ
  • 4,289
  • 1
  • 22
  • 32
RobG
  • 142,382
  • 31
  • 172
  • 209
  • 1
    Active Element is pretty well supported. See: http://stackoverflow.com/questions/5318415/which-browsers-support-document-activeelement – Benry Aug 08 '11 at 00:04
  • Benry — thanks for the link. I still think it needs to be feature tested though, the cost of a couple of property accesses is very low compared to a possible script error. Unfortunately my dev environment has just been upgraded to drop a buch of older browsers (not my choice) so I can't test in old stuff much any more. :-( – RobG Aug 08 '11 at 05:32
  • 1
    **IE WARNING** - see http://stackoverflow.com/questions/3586139/ie-is-randomly-minimizing-when-a-link-is-clicked – Jossef Harush Kadouri Feb 26 '15 at 06:32
  • IE WARNING (like Jossef Harush): Stop using old IE and don't try to fix errors in the software, the problem is NOT yours. Advise your clients to upgrade. – Codebeat Apr 14 '15 at 05:38
  • 1
    @Erwinus—it's not necessarily the clients, it's the people who visit their web sites. IE 8 is still around 20% of web traffic for some sites. – RobG Apr 14 '15 at 14:15
  • @RobG: Put message on top of the page and offer some upgrade options via: http://browsehappy.com/ – Codebeat Apr 14 '15 at 15:51
  • 2
    @Erwinus—so find me a business that happily turns away 20% of visitors. Properly applied progressive enhancement will allow older browsers to use sites, perhaps not with all the bells and whistles but they should be functional. Of course if your site isn't a business site that makes money then your support requirements might be different. – RobG Apr 15 '15 at 00:20
  • 4
    "*Do you really thing* \[sic\] *that somebody that is using an outdated browser is interested in buying stuff from you?*" Yes, actually. Who told you that only people with the latest browsers buy stuff? And supporting customers is about more than just web sales. – RobG Apr 16 '15 at 02:34
3

It seems that the following code works...

document.activeElement.blur();
Timwi
  • 65,159
  • 33
  • 165
  • 230
  • If no element is active, it will return the body element. If *activeElement* isn't supported, it will throw an error. – RobG Aug 07 '11 at 23:45
1

Typescript-friendly answer:

(document.activeElement as HTMLElement).blur();

Reference: https://github.com/Microsoft/TypeScript/issues/5901#issuecomment-396497729

slumtrimpet
  • 3,159
  • 2
  • 31
  • 44