快捷键Ctrl s快速保存屏蔽保存网页到本地,保存网页视频快捷指令

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

实现流程 监听键盘事件：onkeydown（键盘按键按下） 或 onkeyup（键盘按键释放）。判断指定按键是否被按下： e.ctrlKey: Ctrl 键是否被按下，是则返回 true。e.metaKey: Meta 键 (Mac上是 ⌘ Command 键；Windows上是 ⊞ 键)是否被按下，是则返回 true。e.key：返回按键的标识符。S 键如果被按下则返回的就是字符 ‘S’ (区分大小写)。 阻止默认事件：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(); ... } };