快捷键Ctrl+s快速保存，屏蔽保存网页到本地

在Web开发过程中，对于编辑页面有时候希望能够使用Ctrl+s快捷键直接保存标记的内容，像文本编辑一样。
但是，默认情况下的Ctrl+s会调起浏览器的保存网页到本地的功能。
所以，我们需要自己监控键盘输入和阻止浏览器的网页保存功能。

实现流程

1. 监听键盘事件：onkeydown（键盘按键按下） 或 onkeyup（键盘按键释放）。
2. 判断指定按键是否被按下：
   • e.ctrlKey: Ctrl 键是否被按下，是则返回 true。
   • e.metaKey: Meta 键 (Mac上是 ⌘ Command 键；Windows上是 ⊞ 键)是否被按下，是则返回 true。
   • e.key：返回按键的标识符。S 键如果被按下则返回的就是字符 ‘S’ (区分大小写)。
3. 阻止默认事件：e.preventDefault() 或 return false。

代码实现

在Vue的mounted中添加事件监听

mounted() {
    document.onkeydown = (e) => {
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            //  执行save方法
            this.save()
            // 阻止默认事件
            e.preventDefault()
        }
    }
},
methods: {
    save() {
        ...
    }
}

如果是React可以在componentDidMount中添加事件监听

  componentDidMount() {
    document.addEventListener('keydown', this.save);
  }
  
  save = ( event ) => {
    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
      // 阻止默认事件
      event.preventDefault();
      ...
    }
  };