使用 JavaScript 模拟 tab 按键

问题描述

我想让浏览器的行为就像用户在点击某物时按下了 Tab 键一样.在点击处理程序中，我尝试了以下方法:

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

还有 jQuery:

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

...我取自这里.

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

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.

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

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

还有其他想法吗?

推荐答案

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

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.

这篇关于使用 JavaScript 模拟 tab 按键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！