如何在javascript模态窗口上设置焦点？

Question

我们的网站涉及一些生成叠加模态窗口的JavaScript.

但是有一个可访问性问题,一旦模态被触发,focus它仍然在触发元素上而不在模态本身上.

这些模态可以包括各种html元素,标题,段落和表单控件.我想要的是重点开始模态中的第一个元素,所以最有可能是一个h4标签.

我已经探索过使用该focus()函数但是这不适用于许多html元素.

一个想法是a在窗口中添加一个空标签,可以获得焦点,但我不确定这种方法.

Answer 1

开派对的时间很晚，但是现有的答案并不尊重可访问性。

在上访问模态W3C维基页面提供了比什么要求在OP更深入的了解，相关部分是有tabindex=-1模态容器上（也应该有一个aria-dialog属性），所以它可以得到:focus。

这是将焦点放在模式上的最便捷的方式，还有更多关于仅将其保留在模式中的文档-并将其返回到触发模式的元素-这里有很多解释，所以我建议任何人有兴趣检查上面的链接。

Answer 2

您可以将文本框附加到模式 HTML 的开头，设置焦点，然后隐藏文本框。据我了解您的需求，应该能达到预期的效果。