javascript - 有没有办法以编程方式触发 TAB 键将焦点移动到下一个可聚焦元素?

标签 javascript jquery html accessibility

<分区>

我正在编写一个单元测试来测试我网页上的 Tab 键顺序,但我找不到一种方法来模拟用户按下 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() 是 Not Acceptable ,即使您可以编写代码来找出下一个可聚焦元素。所以这条路不是我想要的:

function getAllFocusables () {
    ...
}

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

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

最佳答案

您无法使用 Javascript 从标准浏览器模拟 Tab 键

如果您使用 headless 浏览器进行单元测试,例如phantomjs您可以模拟tab键

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

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

关于javascript - 有没有办法以编程方式触发 TAB 键将焦点移动到下一个可聚焦元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40454754/

相关文章:

javascript - 组织 Javascript 代码的最佳方式

html - 错误 : Reference. 推送失败:第一个参数在属性中包含一个函数 - firebase

javascript - 使用Jquery从表格单元格获取复选框的值

html - CSS下拉列表中元素的对齐

javascript文档onmousedown取消元素onclick

javascript - 使用 javascript 将 HTML5 WebSQL 数据库的内容附加到电子邮件

javascript - Phantomjs/Casperjs 从页面内的 JS 脚本获取 url

jquery - 在 Selenium WebDriver 中处理 jquery 选项卡

javascript - 更改字段值时如何运行函数?

javascript - jQuery 滚动到 div onclick 不起作用