Home/ Questions/Q 283211
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T05:21:15+00:00

I’d like to have the browser act as if the user had pressed the

  • 0

I’d like to have the browser act as if the user had pressed the Tab key when they click on something. In the click handler I’ve tried the following approaches:

var event = document.createEvent('KeyboardEvent');
event.initKeyEvent("keypress", true, true, null, false, false, false, false, 9, 0);
this.input.focus()[0].dispatchEvent(event);

And jQuery:

this.input.focus().trigger({ type : 'keypress', which : 9 });

…which I took from here.

The first approach seems to be the best bet, but doesn’t quite work. If I change the last two parameters to 98, 98, indeed, a ‘b’ is typed into the input box. But 9, 0 and 9, 9 (the former of which I took right from the MDC web site) both give me these errors in firebug under FF3:

Permission denied to get property XULElement.popupOpen
[Break on this error] this.input.focus()[0].dispatchEvent(event);

Permission denied to get property XULElement.overrideValue
[Break on this error] this.input.focus()[0].dispatchEvent(event);

Permission denied to get property XULElement.selectedIndex
[Break on this error] this.input.focus()[0].dispatchEvent(event);

Permission denied to set property XULElement.selectedIndex
[Break on this error] this.input.focus()[0].dispatchEvent(event);

I’ve heard such (with no clear definition of ‘such’) events are ‘untrusted’, which might explain these errors.

The second approach causes whatever value I put as event.which to be passed as event.which, but to no effect (even if I use 98 instead of 9, no ‘b’ is typed in the box.) If I try setting event.data in the object I’m passing, it ends up undefined when the event is triggered. What follows is the code I’m using to view that:

$('#hi').keypress(function(e) {
  console.log(e);
});

Any other ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The solution I ended up going with is to create a “focus stealer” div (with tabindex = -1–can have the focus but can’t be tabbed to initially) on either side of the area in which I want to manually manage the focus. Then I put a bubbling-true event listener for focus and blur on the whole area. When any focus occurs on the area, the tabindex values are changed to -1, and when any blur occurs, they’re changed to 0. This means that while focused in the area, you can tab or shift-tab out of it and correctly end up on other page elements or browser UI elements, but as soon as you focus out of there, the focus stealers become tabbable, and on focus they set up the manual area correctly and shunt the focus over to the element at their end, as if you had clicked on one end or the other of the manual area.

    • 0