一、文章参考

KeyboardEvent

二、问题说明

在项目中默认地图是聚合显示，地图层级逐级提高，最终能查找到目标，由于地图数据较多，查找不准确，因此，希望添加一个快捷能快速查找到目标点位。

三、快速入门

给全局添加快捷键，则要求把事件绑定到document上。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>// 响应 key 事件触发的方法function hotKeyHandler(keyboardEvent) {console.log(keyboardEvent);if (keyboardEvent.ctrlKey && keyboardEvent.code === "KeyQ") {alert('触发了 ctrl + q 的快捷键！')} else {console.log('触发 的快捷键！' + keyboardEvent.code)}keyboardEvent.preventDefault();}window.onload = function () {document.addEventListener('keydown', hotKeyHandler);};</script>
</html>

注意：**keyboardEvent.preventDefault();**如果执行，则会继续执行相同快捷键的其他操作，比如F5刷新和F11全屏展示等；如果不执行，则会继续响应默认的快捷键事件。

四、 KeyboardEvent 介绍

KeyboardEvent 对象描述了用户与键盘的交互。每个事件都描述了用户与一个按键（或一个按键和修饰键的组合）的单个交互；事件类型keydown， keypress 与 keyup 用于识别不同的键盘活动类型。

属性

KeyboardEvent.altKey 只读

返回一个 Boolean，如果按键事件产生时，Alt（OS X 中是 Option 或⌥）键被按下，则该值为 true 。

KeyboardEvent.ctrlKey 只读

返回一个 Boolean，如果按键事件发生时 Ctrl 键被按下，则该值为 true 。

KeyboardEvent.metaKey 只读

Returns a Boolean that is true if the Meta key (on Mac keyboards, the ⌘ Command key; on Windows keyboards, the Windows key (⊞)) was active when the key event was generated.

KeyboardEvent.shiftKey 只读

Returns a Boolean that is true if the Shift key was active when the key event was generated.

KeyboardEventInit 字典，有以下几种值：

"key", 可选，默认为 "", DOMString 类型，设置 KeyboardEvent.key 的值。
"code", 可选，默认为 "", DOMString 类型，设置KeyboardEvent.code 的值。
"location", 可选，默认为 0, unsigned long类型，设置 KeyboardEvent.location 的值。
"ctrlKey", 可选，默认为 false, Boolean 类型，设置 KeyboardEvent.ctrlKey 的值。
"shiftKey", 可选，默认为 false, Boolean 类型，设置KeyboardEvent.shiftKey 的值。
"altKey", 可选，默认为 false, Boolean 类型，设置 KeyboardEvent.altKey 的值。
"metaKey", 可选，默认为 false, Boolean 类型，设置 KeyboardEvent.metaKey 的值。
"repeat", 可选，默认为 false, Boolean 类型，设置 KeyboardEvent.repeat 的值。
"isComposing", 可选，默认为 false, Boolean 类型，设置 KeyboardEvent.isComposing 的值。
"charCode", 可选，默认为 0, unsigned long 类型，设置 KeyboardEvent.charCode (已废弃) 的值。
"keyCode", 可选，默认为 0, unsigned long 类型，设置KeyboardEvent.keyCode (已废弃) 的值。
"which", 可选，默认为 0, unsigned long 类型，设置KeyboardEvent.which (已废弃) 的值。

五、 Vue 执行组合快捷键

5.1 给全局添加快捷键

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./vue.min.js"></script></head><body><div id="app"></div></body><script>new Vue({el: '#app',mounted() {document.addEventListener('keydown', this.hotKeyHandler);},beforeDestroy() {document.removeEventListener('keydown', this.hotKeyHandler);},methods: {hotKeyHandler(keyboardEvent) {// 是地区层级 并且 是概览模式，用户输入 ctrl + p  快捷键，才会触发if (keyboardEvent.ctrlKey && keyboardEvent.code === 'KeyQ') {alert('触发了 ctrl + q 事件');}// 阻止其他默认事件的处理，比如F5刷新 和 F11全屏都会失效// keyboardEvent.preventDefault();},},});</script>
</html>

备注： keyboardEvent.preventDefault();阻止其他默认事件的处理，比如F5刷新和 F11全屏都会失效

5.2 input表单控件添加快捷键

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./vue.min.js"></script></head><body><div id="app"><div><input v-model="name" @keyup.enter="nativeEnter"/></div><div><input v-model="address" @keyup="altEnterActioin" /></div></div></body><script>new Vue({el: '#app',data () {return {name: '名字',address: '地址'}},methods: {nativeEnter () {alert('name' + this.name)},altEnterActioin (keyboardEvent) {console.log(keyboardEvent)if (keyboardEvent.ctrlKey && keyboardEvent.keyCode === 13) {alert("触发了 ctrl + enter 事件" )}// 阻止其他默认事件的处理，比如F5刷新 和 F11全屏都会失效keyboardEvent.preventDefault()}},})</script>
</html>

浏览器绑定快捷键KeyboardEvent相关推荐

SublimeText设置在浏览器打开快捷键
这里插入一下安装"view in browser"官方版的说明:(前提是得先安装package control插件) 1.通过"ctrl+shift+p"打开命 ...
vue快速复制快捷键_⌨️ Vue项目给应用优雅的绑定快捷键
想必各位前端看官也一定做过这样的需求,给我们的应用某些主要的功能绑定一个快捷键.尤其是工具类的产品,让用户可以使用快捷键操作,能大大提高工具使用效率. 如何绑定快捷键聪明的你也想到了,Vue 官方文 ...
vscode中打开浏览器的快捷键_VSCode设置默认打开的浏览器的方法
vscode怎么浏览器打开html文件?可以通过安装open in browser插件解决. 1.安装open in browser插件安装完点击重新加载 2.vscode怎么修改默认浏览器在安装 ...
Mac下浏览器超实用快捷键
开场白本文介绍一些Mac下浏览器的实用快捷键. 虽然网上介绍快捷键快捷键的资料已经很多了,但奇怪的是,一些经典的.非常非常实用的快捷键,却很少有人提及.很多文章,都是长篇大论地说一堆人人熟知的快捷键 ...
求生之路自定义服务器,求生之路2·教你如何自定义绑定快捷键
一.找到这个autoexec.cfg文件,路径在 F:\--\Left 4 Dead 2\left4dead2\cfg\ 如果没有autoexec.cfg这个文件,可以自己新建一个记事本. 在文件开头 ...
Mac中Chrome浏览器的快捷键
Mac中Chrome浏览器的快捷键 *在触控板中打开单击鼠标右键的功能不用鼠标使用双指在触控板中连续点击两次就是出现下图这个效果打开"开发者工具" ⌘ + Option + ...
Chrome (Google) 浏览器的快捷键大全
我相信喜欢高效工作的人,在使用工具时,一定喜欢用快捷键,这样才可以将效率提高,以下是网上转过来的,Chrome (Google) 浏览器的快捷键大全,希望对有需要有朋友有所帮助 1 Ctrl+N 打开 ...
addevent()实现跨浏览器绑定事件
绑定事件一般有三种方式:传统绑定事件,IE绑定事件,W3C绑定事件.传统绑定存在可读性问题,this问题,覆盖问题.为实现跨浏览器绑定事件,我们采用自定义方法addEvent().代码如下: //跨浏 ...
Chrome浏览器键盘快捷键
Chrome浏览器键盘快捷键标签页和窗口快捷键操作快捷键打开新窗口 Ctrl + n 在隐身模式下打开新窗口 Ctrl + Shift + n 打开新的标签页,并跳转到该标签页 Ctrl + ...

浏览器绑定快捷键KeyboardEvent

文章目录

一、文章参考

二、问题说明

三、快速入门

四、 KeyboardEvent 介绍

五、 Vue 执行组合快捷键

5.1 给全局添加快捷键

5.2 input表单控件添加快捷键

浏览器绑定快捷键KeyboardEvent相关推荐

最新文章

热门文章

浏览器绑定快捷键KeyboardEvent

文章目录

一、文章参考

二、问题说明

三、快速入门

四、 KeyboardEvent 介绍

五、 Vue 执行组合快捷键

5.1 给全局添加 快捷键

5.2 input表单控件添加快捷键

浏览器绑定快捷键KeyboardEvent相关推荐

最新文章

热门文章

5.1 给全局添加快捷键