浏览器绑定快捷键KeyboardEvent
Posted 胖鹅68
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器绑定快捷键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 用于识别不同的键盘活动类型。
属性
返回一个 Boolean，如果按键事件产生时，Alt（OS X 中是 Option 或⌥）键被按下，则该值为 true 。
返回一个 Boolean，如果按键事件发生时 Ctrl 键被按下，则该值为 true 。
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.
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的主要内容，如果未能解决你的问题，请参考以下文章
sublime textsublime text 快捷键绑定浏览器快速打开
KeyboardEvent keyCode Property