阻止隐藏元素获得焦点

Question

我有一个具有如下 html 结构的组件：

<div class="wrapper">
    <div class="view"></div>
    <div class="view"></div>
    <div class="view"></div>
    <div class="view"></div>
</div>

视图彼此相邻，包装器具有全屏尺寸，并且

overflow: hidden

这是一个多步骤表单，基本上是一个整页滑块。 但是，当通过选项卡浏览输入时，我可以聚焦在视图之外的输入字段。你们会采取什么措施来防止这种情况发生？

display: none

并没有真正起作用，因为它必须可见才能使滑动动画起作用。

一个想法是使用

display: none

，但在切换幻灯片之前将其删除。

另一个想法是，如果父“视图”具有特定的类，则仅使用 JS 来阻止输入获得焦点

不过，这些感觉并不是 100% 正确，而且有点老套。有谁知道解决办法吗？

Answer 1

将

tabindex="-1"

添加到您的元素中，将此属性设置为 -1 可以使该元素不可聚焦。