Javascript 重置初始键盘导航的选项卡索引和鼠标用户的scrollIntoView

发布于10月04日

在这个话题上有大约other个帖子没有回答我的问题.

在单击按钮时，我需要滚动到表单的某个部分.此外，在页面顶部有一个Skip-Nav链接，skipnav，在本例中也应该接收第一个TAB焦点，仅用于键盘导航.它不应该是自动对焦的，但如果键盘用户按了TAB，跳转应该从skipnav元素开始.

以下代码不起作用:

    // Focus/blur "skipnav" to prepare initial TAB-ing for keyboard users, AND scroll to section for mouse users
    document.getElementById('skipnav')?.focus();
    document.getElementById('skipnav')?.blur();
    var stepIndicatorElement = document.getElementsByClassName("usa-step-indicator")[0];
    if (stepIndicatorElement) {
        stepIndicatorElement.scrollIntoView();
    }

问题是:

第一个focus()/blur()对本身没有其他代码，当您第一次按TAB键时，它将聚焦next元素after skipNav；
scrollIntoView()虽然不会立即聚焦任何内容，但会对Tab键顺序执行一些操作，这样按Tab键就会聚焦该部分中的第一个元素.即使我有上面的focus()/blur()，按Tab键也会聚焦in that section.scrollIntoView是否会以某种方式重置或准备新的Tab键顺序，即使没有聚焦？

var stepIndicatorElement = document.getElementsByClassName("usa-step-indicator")[0]; if (stepIndicatorElement) { var y = stepIndicatorElement.getBoundingClientRect().top + window.scrollY - 15; // e.g. with extra offset window.scrollTo(0, y); }

<div id="header" tabIndex={-1}> {/* tabindex=-1 makes an element programmatically focusable but not TAB-focusable from the user's perspective */} <a id="skipnav" className="skipnav" href="#main-content">Skip to main content</a> </div>

Javascript 重置初始键盘导航的选项卡索引和鼠标用户的scrollIntoView

推荐答案

Javascript相关问答推荐

为什么有些库公开了执行相同任务的方法，但每个方法都处于同步/同步上下文中？

如何使用JavaScript动态地将CSS应用于ToDo列表？

Klaro与Angular的集成

Google Apps脚本中的discord邀请API响应的日期解析问题

Angular中计算信号和getter的区别

togglePopover()不打开但不关闭原生HTML popover'

Exceljs：我们在file.xlsx(...)&#中发现了一个问题'"" 39人；

仅针对RTK查询中的未经授权的错误取消maxRetries

在Vite React库中添加子模块路径

将现场录音发送到后端

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

使用Promise.All并发解决时，每个promise 的线性时间增加？

如何在Angular17 APP中全局设置AXIOS

rxjs插入延迟数据

基于props 类型的不同props ，根据来自接口的值扩展类型

使用Nuxt Apollo在Piniastore 中获取产品细节

TypeError：无法读取未定义的属性(正在读取'；宽度'；)

每次重新呈现时调用useState initialValue函数

如何在每隔2分钟刷新OKTA令牌后停止页面刷新