javascript - 使用 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 });

...我从 here 中获取的.

第一种方法似乎是最好的选择，但效果不佳。如果我将最后两个参数更改为 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”。)如果我尝试在我传递的对象中设置 event.data，当事件被触发时它最终未定义。以下是我用来查看的代码:

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

还有其他想法吗？

Answer 1

我最终采用的解决方案是在我想要的区域的任一侧创建一个“焦点窃取器”div(使用 tabindex = -1——可以有焦点但最初不能切换到)手动管理焦点。然后我在整个区域放置了一个冒泡真实的事件监听器，用于聚焦和模糊。当任何焦点出现在该区域上时，tabindex 值更改为 -1，当出现任何模糊时，它们更改为 0。这意味着当聚焦在该区域上时，您可以使用 tab 键或 shift-tab 键移出它并正确地结束在其他页面元素或浏览器 UI 元素上，但是一旦您将焦点从那里移开，焦点窃取器就会变成可标记的，并且在焦点上它们会正确设置手动区域并将焦点转移到它们末端的元素上，就像您点击了手动区域的一端或另一端一样。