如何在输入时禁用热键？

Question

当用户按下某个键时，会显示一个组件。我有四个这样的组件。当用户打字或编辑时，我想禁用热键。

我在四个组件中都有这段代码

componentDidMount(){
    document.body.addEventListener("keypress", (e) => {
        if (e.key === "t") { // "n" "w" "," for the others
            this.setState({opened: !this.state.opened});
        }
    });
}

我只想在用户键入或编辑时禁用热键。有没有办法知道是否有任何输入处于焦点？或者另一种方式，我们可以仅在所有输入都“模糊”时添加事件侦听器吗？

Answer 1

因此，我们需要知道页面上的任何输入是否处于焦点状态，如果其中任何一个输入处于焦点状态，那么我们将不会执行任何操作来显示或隐藏组件。

假设我们的组件在 state 中有一些属性，该属性指示页面上的某些输入已获得焦点，我们将其称为isFocus。

因此，我们需要收集页面上的所有输入，迭代它们并将事件处理程序分配给每个输入focus，blur这样我们就能够知道何时更改isFocus状态中的属性。

首先，我们需要收集页面上的所有输入，我们这样做：

const inputs = document.getElementsByTagName('input')。

迭代它们并分配focus和blur事件处理程序：

for (let input of inputs) {
    input.addEventListener('focus', () => this.setState({isFocus: true}));
    input.addEventListener('blur', () => this.setState({isFocus: false}));
}

最后，让我们更改事件的条件keypress：

document.addEventListener('keypress', e => {
    if (!this.state.isFocus && e.key === "t") {
        this.setState({opened: !this.state.opened});
    }
});

一切都将看起来像这样：

componentDidMount() {
    const inputs = document.getElementsByTagName('input');
    for (let input of inputs) {
        input.addEventListener('focus', () => this.setState({isFocus: true}));
        input.addEventListener('blur', () => this.setState({isFocus: false}));
    }

    document.addEventListener('keypress', e => {
        if (!this.state.isFocus && e.key === "t") {
            this.setState({opened: !this.state.opened});
        }
    });
  }

希望这可以帮助。祝你好运。