输入时如何禁用热键？

Question

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

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

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

我只想在用户键入或编辑时禁用热键。有没有办法知道是否有任何输入处于焦点？或者换一种方式，只有当所有输入都是 'on blur'?

时，我们才能添加事件监听器吗？

Answer 1

您可以将当前打开的组件状态移动到最上层组件，如下所示：

state: {
    openComponent: null
}

您的热键功能如下所示：

hotkey(e){
    const componentKeyHandlers = {
       "n": {openComponent: "componentN"},
       "m": {openComponent: "componentM"}
    }
    if (e.keyCode === 27) { //ESC
        this.setState({openComponent: null});
    } else if (!this.state.openComponent) {
        this.setState(componentKeyHandlers[e.key]);
    }
}

我假设您每次只能打开一个组件。此外，您可以按 ESC 键关闭它们。对于每个组件，其可见性将通过将 props.openComponent 与其名称进行比较来控制，因为当前状态组件是通过 props 传递给每个组件的。

这样就不需要注销热键功能了。当您开始使用打开的组件键入内容时，由于 if (!this.state.openComponent) 条件，setState 将被忽略。

Answer 2

所以我们需要知道页面上的任何输入是否处于焦点状态，如果其中任何一个处于焦点状态，那么我们将不会做任何显示或隐藏组件的事情。

假设我们的组件处于状态 some 属性，这表明页面上的某些输入已获得焦点，我们称其为 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});
        }
    });
  }

希望这对您有所帮助。祝你好运。

输入时如何禁用热键？

How to disable hotkeys when inputting?

javascript

hotkeys