禁用制表符和叠加层之外的dom元素的制表符

Question

我有一个模态，弹出带有可选项卡的元素。是否有类似jQuery的:focusable或pointer-events: none之类的东西，可以让我使用CSS禁止专注于覆盖层下方的项目？

编辑：基于JS的方法（和选择器）的问题在于，每次使用React重新呈现时，都必须再次运行查询选择器。我无法控制呈现此模式的组件。

Answer 1

您想按照以下方式做某事：

const inputs = [...document.getElementsByTagName('input')];
inputs.forEach((input) => input.setAttribute('tabindex', '-1'));

const modalInputs = [...document.querySelectorAll('.my-modal input')];
modalInputs.forEach((input, index) => input.setAttribute('tabindex', index));

完整示例https://codepen.io/bradevans/pen/GGYxrg

编辑：在OP注释之前，我还没有看到reactjs标记...我将使用Modals componentDidMount生命周期方法来更改底层DOM输入选项卡索引并同时或使用内部状态来更改模式。 ..

您可能还想存储旧的选项卡索引，然后将其重新应用于componentWillUnmount（）;