使用JavaScript模拟tab键

Question

我希望浏览器的行为就像用户点击某些内容时按Tab键一样.在点击处理程序中,我尝试了以下方法:

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

和jQuery:

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

......我从这里拿走了.

第一种方法似乎是最好的选择,但并不是很有效.如果我将最后两个参数更改为98,98,确实在输入框中输入了'b'.但是,9,0和9,9(前者我从MDC网站上取得的)都在FF3下的firebug中给我这些错误:

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);

我听说过(没有明确定义'此类')事件是"不可信的",这可能解释了这些错误.

第二种方法导致我作为event.which传递的任何值作为event.which,但没有效果(即使我使用98而不是9,在框中没有输入'b'.)如果我尝试设置事件在我传递的对象中的.data,当事件被触发时它最终未定义.以下是我用来查看的代码:

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

还有其他想法吗？

Answer 1

我最终采用的解决方案是在我想要手动管理的区域的两侧创建一个“焦点窃取者”div（tabindex = -1 - 可以拥有焦点，但最初不能切换到）焦点。然后我放置了一个冒泡真实事件侦听器，用于对整个区域进行聚焦和模糊。当该区域发生任何焦点时，tabindex 值将更改为 -1，而当发生任何模糊时，它们将更改为 0。这意味着当焦点位于该区域时，您可以通过 Tab 或 Shift-Tab 键离开该区域，然后正确地结束在其他页面元素或浏览器 UI 元素上，但是一旦您将焦点移出那里，焦点窃取器就会变得可选项卡，并且在焦点上它们会正确设置手动区域并将焦点分流到其末尾的元素，就像您单击了手动区域的一端或另一端一样。