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

Question

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

虽然有一个可访问性问题，但一旦模态被触发，focus仍然在触发元素上而不在模态本身上。

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

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

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

Answer 1

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

W3C wiki page on accessible modals提供了比OP中提出的更多洞察力，相关部分在模态容器上有tabindex=-1（其中也应该有aria-dialog属性）所以它可以得到:focus。

这是将焦点设置在模态上最容易获得的方法，还有更多关于仅将其保留在模态中的文档 - 并将其返回到触发模态的元素 - 这里要解释的很多，所以我建议有兴趣查看上面的链接。

Answer 2

您可以将文本框附加到模式HTML的开头，设置焦点然后隐藏文本框。如果我了解你的需要，应该有所期望的效果。

Answer 3

您可以尝试模糊（）the element that has the focus。