admin 管理员组

文章数量: 1184232

在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();
      ...
    }
  };

本文标签： 键盘按键 事件 阻止默认

版权声明：本文标题：网页快存小技巧：如何关闭浏览器中Ctrl+s的尴尬功能和危险操作 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1770720414a3536833.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。