快捷键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();...}};

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

Vue 中实现快捷键CTRL + S（保存）,CTRL+ Y（恢复）,CTRL+ Z（回撤）
mounted() {window.addEventListener('keydown', this.handleEvent) }, beforeDestroy() {window.removeEve ...
电脑桌面云便签软件怎么用便签快捷键在编辑中快速保存便签内容？
一.打开电脑桌面云便签软件Windows版,登录账号进入云便签主界面,在个人便签内容列表中选择一条已有的便签内容,左键双击打开便签编辑框: 二.在编辑便签的过程中可以按下默认快捷键"Ctrl ...
Eclipse快捷键大全,导包快捷键:ctrl+Shift+/【转】
Ctrl+Shift+L 显示所有快捷键 Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ ...
excel保存快捷键_干货 | 快速提高工作效率的电脑快捷键！
点击标题下「蓝色微信名」可快速关注随着科学技术的发展,电脑已经成为每个人生活和工作的必备工具.然而,很多人在使用电脑的过程中非常依赖鼠标,导致双手需要频繁离开键盘,造成工作间歇中断,导致用电脑处理工 ...
屏蔽Windows系统输入法快捷键Ctrl+Space
快速解决新建文件1.reg 写入以下内容 Windows Registry Editor Version 5.00[HKEY_CURRENT_USER\Control Panel\Input Met ...
如何在vscode中使用快捷键ctrl+alt+L，快速格式化文档。
由于经常使用Pycharm格式化文档,所以习惯了使用ctrl+alt+L的快捷键格式化python代码.那么在vscode中如何更该为自己习惯的方式呢? 第一步:点击左下角,或者快捷键ctrl+s. ...
电脑快捷键你知道多少个？QQ截图快捷键ctrl加什么
电脑的快捷键有很多,而且不常用的话还不知道!例如QQ截图,还停留在聊天框内截图吗?如果没有在使用QQ聊天,但是又需要截图的时候,还要打开聊天框使用鼠标进行截图,这样多麻烦呀!QQ截图快捷键ctrl加什 ...
如何在电脑录屏？win10录屏快捷键ctrl+alt+
日常使用的电脑有很多功能未被大家发现,比如可以录制屏幕视频:那如何在电脑录屏?win10电脑录屏有没有什么快捷键可以快速录制?下面就一起和小编来看看win10录屏快捷键是如何在电脑录屏的,有需要的朋友 ...
傲游浏览器怎么快速保存图片快速保存功能使用技巧分享
打开傲游浏览器,点击右上角的"三"字型图标,并在出现弹窗后选取[设置]; 傲游浏览器怎么快速保存图片?快速保存功能使用技巧分享进入傲游设置页面后,在左侧的栏目项中点击" ...
CAD误操作怎么办？CAD撤销快捷键、CAD自动保存…
在使用CAD软件进行设计制图时,难免会出现各种CAD误操作的情况,轻则需要撤销错误命令.重新编辑设计元素,重则出现CAD异常关闭,导致一天的活儿白干了. 那么如何快速解决CAD误操作问题,及时拯救加班 ...

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

实现流程

代码实现

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

最新文章

热门文章