学数学的程序猿
数学 / 前端开发 / 算法About me
键盘按下事件 - 浏览器中监听ctrl + s或者command + s事件
前端
2023-02-15 13:58:39

示例为在react中使用,在vue或别的项目中方法一样,在页面加载完成时监听键盘的keydown事件,页面销毁前移除事件。
其余按键事件同理。

handleSaveBtn = (event: KeyboardEvent) =>{
    if ((event.ctrlKey || event.metaKey) && event.key == 's'){
        event.preventDefault();
        this.onSave();  //执行需要操作的函数,例如保存数据
    }
}

componentDidMount() {
    this.init();
    window.addEventListener('keydown', this.handleSaveBtn);
}
componentWillUnmount() {
    window.removeEventListener('keydown', this.handleSaveBtn);
}