时间戳

首页 > 解决方案 > 输入时如何禁用热键？

javascript - 输入时如何禁用热键？

问题描述

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

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

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

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

标签： javascripthotkeys

解决方案

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

假设我们的组件在 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});
        }
    });
  }

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

推荐阅读