CODEWITHSUNDEEP
javascriptjqueryfocus
Dave
Dave

Reputation: 46359

Give focus to browser

I'm working on keyboard accessibility. I have a flash object which sits inside a page, and to stop the focus getting trapped inside it, I've added tab listeners which talk through ExternalInterface to some JavaScript functions.

The JavaScript looks for the next available element with a tabIndex and calls focus() on it. So far so good. But if the plugin is the last tabbable item on the page (or first when reverse-tabbing), there is no element to switch to. Normally this would set focus to the browser window, so I'd like to keep that behaviour.

Hence my question: Is it possible to programatically give focus to the browser's chrome? Even better if I can mimic both forward and backward tabbing. Also I'd like to avoid adding extra tabbable components before/after the flash if possible, unless I can make them effectively invisible to both the mouse and keyboard.

Upvotes: 4

Views: 4176

Answers (2)

JDL
JDL

Reputation: 1517

Came across this in my own search for a similar answer. If you want to release the focus on the currently focused element, use document.activeElement; If you want a fallback in the off chance its not supported, use focus on the parent element of the document. This should support all known browsers, as far as I know:

var activeElement = document.activeElement;
if (activeElement) {
   activeElement.blur();
} else if (document.parentElement) {
   document.parentElement.focus();
} else {
   window.focus();
}

Upvotes: 3

bfavaretto
bfavaretto

Reputation: 71939

Setting the focus to a dummy anchor with no text content, at the top of the document, seems to work:

document.getElementsByTagName('a')[0].focus();

http://jsfiddle.net/4NA5u/1/.

Upvotes: 0

Related Questions