有没有一种编程方式可以触发TAB键将焦点移动到下一个可聚焦元素？

Question

我正在编写一个单元测试来测试我的网页上的选项卡顺序，但我找不到一种方法来模拟用户按下TAB键以聚焦于下一个可聚焦元素，尽管这似乎是一项容易的任务。

允许使用jQuery，但更喜欢纯JavaScript解决方案。任何形式的帮助都将不胜感激。

// TODO
function triggerTab () {


}

$("#btn-save").focus();
triggerTab();

// Expect the focus is on the cancel button now.
console.log(document.activeElement.id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p> some text </p> 
<button id="btn-save"> save </button>
<button id="btn-cancel> cancel </button>

顺便说一下，在下一个可聚焦的元素上调用focus()是不可接受的，即使您可以编写代码来找出下一个可聚焦的元素。因此，这条路不是我想要的：

function getAllFocusables () {
    ...
}

var focusables = getAllFocusables(),
    index = focusables.indexOf(document.activeElement);

$(focusables[index+1]).focus();

- Jason Lee

---

没有办法触发Tab键，但是可以通过在DOM中查找下一个可聚焦元素并将其聚焦来实现。也许你用于单元测试的工具有触发按键的方法，我不知道，因为我从未对简单的事件处理程序进行过单元测试。 - adeneo

为什么你不想使用更简单的方法直接聚焦你想要的东西呢？ - VLAZ

@vlaz 因为这是我项目中一个模块的单元测试，该模块有js代码来使用与我在问题末尾提出的相同思路来管理选项卡顺序。我认为使用相同模块的代码来测试自身是愚蠢的。这就是为什么我想以这种方式进行测试，设置一个标记，以编程方式触发选项卡，并检查选项卡顺序是否符合预期。 - Jason Lee

这不是重复的问题。引用的问题询问为什么，而当前的问题询问我们如何绕过此限制。 - Adam

Answer 1

使用JavaScript无法模拟标准浏览器中的Tab键。

如果您正在使用类似于phantomjs的无界面浏览器进行单元测试，则可以模拟Tab键。

var webPage = require('webpage');
var page = webPage.create();

page.sendEvent('keypress', page.event.key.Tab);

- Adam

---

这是错误的。你可以模拟按下Tab键，因为.focus()方法存在。通过跟踪每个可用于Tab键的DOM元素，并将焦点设置在列表中的下一个元素上。虽然这不是一种适用于单元测试的可接受方式，但它确实有效。 - user3044394

@user3044394 问题明确表示使用 focus() 不是一个可接受的解决方案。 - Adam