JS 响应键盘事件（div 响应）
监听组合键例子
mounted() {
// 绑定监听事件
window.addEventListener("keydown", this.keydown);
},
beforeDestroy() {
// 移除监听事件
window.removeEventListener('keydown', this.keydown)
},
keydown(e) {
// window.event 等价于 event参数
// 有些浏览器除了通过keyCode获取输入键code，还可以通过which，charCode获取，这么写是出于浏览器兼容性考虑
const event = e || window.event;
const keyCode = event.keyCode || event.which || event.charCode;
const keyCombination = event.ctrlKey;
// ctrl + c 复制
if (keyCombination && keyCode === 67) {
// 阻止默认事件
event.preventDefault()
event.returnValue = false
console.log('触发ctrl + c 事件')
}
}
| 属性 | 意义 |
|---|---|
| key | 事件对应按钮的字符 |
| keyCode | 事件对应按钮的Unicode码 |
| which | 事件对应按钮的Unicode码 |
其中，不同的浏览器对keyCode和which的支持情况是不同的，上文例子有提升兼容性的方法。
阻止浏览器默认操作
-
W3C推荐的阻止默认行为的方式是
event.preventDefault()，此方法只会阻止默认行为而不会阻止事件的传播。 -
IE8及之前的浏览器阻止默认行为需要使用
window.event.returnValue = false。 -
直接在事件处理函数中return false也能阻止默认行为，只在
DOMO级模型中有效。此外，在jQuery中使用return false会同时阻止默认行为与事件传播。
监听方式
键盘事件往往是全局监听，设监听的函数为keyboard()。
1、keyup事件类型。该类型触发条件为按键按下去并松开。
//长按并松开只触发一次
document.addEventListener('keyup', keyboard);
document.onkeyup = keyboard; //记得不要加括号！
2、keydown事件类型。该类型触发条件为按键按下去。
//长按可以触发多次
document.addEventListener('keydown', keyboard);
document.onkeydown = keyboard;
3、keypress事件类型。该类型触发条件为按键按下去且产生了字符。
//长按可以触发多次
//遇到'1'，'a'，回车等按键可以触发，但del键，向上键等则不会
document.addEventListener('keypress', keyboard);
document.onkeypress = keyboard;
注意：keypress的兼容性并不是很好，比如安卓系统就不支持，所以尽量避免使用。
onkey___ 和 addEventListener之间，最好选后者。
如果keyboard不带参，则监听的事件是任何符合条件的按键，即只要你按了键盘，就会触发事件。
常用键盘对应的键值（ASCII码）
- 菜鸟键值：https://www.runoob.com/tags/html-ascii.html
- 博客键值：https://blog.csdn.net/han_ying_ying/article/details/46636695
| 按钮 | 键值（ASCII码） |
|---|---|
| 回车Enter | 13 |
| 数字键盘 Enter | 108 |
| Delete | 46 |
| Tab | 9 |
| BackSpace | 8 |
| shift | 16 |
| Alt | 18 |
| X | 88 |
| C | 67 |
| V | 86 |
| Z | 90 |
当按下的组合键包含Ctrl键时，ctrlKey键会显示为true;
当按下的组合键包含Shift键、或者按键之前开启大写时，shiftkey键会显示为true;
当按下的组合键包含Alt键时，altKey键会显示为true;
当按下的组合键包含meta键（Mac电脑上 是 【⌘】、command键，非mac电脑为 是win键时，metaKey键会显示为true。
div响应键盘事件
解析：能够响应键盘事件的元素是有限的，它们是：form元素、a标签元素，window、document这样的元素；
但其它元素如果想响应键盘事件则必须具备两个基本要素：
1、具有tabindex属性
2、获取焦点；
<div id="key1" tabindex="1" style="background-color: red;">
<span>text</span>
</div>
const key = document.getElementById("key1");
// key.setAttribute('tabindex', 1);
key.focus()
key.style.outline = 'none'
key.onkeydown =fn; // 注册keydown事件处理函数，键盘按下
key.onkeyup = fn; // 注册keyup事件处理函数，键盘松开
key.onkeypress = fn; // 注册keypress事件处理函数，不推荐使用
function fn (e) {
// 阻止冒泡，阻止默认时间的触发
e.stopPropagation();
e.preventDefault();
const ev = e || window.event; //标准化事件处理
console.log(ev)
}
-
tabindex 链接：https://www.w3school.com.cn/tags/att_standard_tabindex.asp
-
tabindex 语法
<element tabindex="number">，规定元素的 tab 键控制次序（1 是第一个）。 -
tabindex 可以直接在元素上面加，也可以通过 JS 添加。
-
当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，这样就便于我们通过js设置上下左右键的响应事件来focus，在widget内部可以用到。
-
当tabindex>=1时，该元素可以用tab键获取焦点，而且优先级大于tabindex=0；不过在tabindex>=1时，数字越小，越先定位到。
-
在IE中，tabindex范围在1到32767之间（包括32767），在FF， Chrome无限制，不过一旦超出32768，顺序跟tabindex=0时一样。这个估计跟各个浏览器对int型的解析有关。
vue 中的 div 响应键盘事件
<div ref="efContainer"></div>
mounted() {
// 绑定监听事件，注册keydown事件处理函数，键盘按下
this.$refs.efContainer.addEventListener("keydown", this.keydown);
this.$refs.efContainer.focus()
this.$refs.efContainer.style.outline = 'none'
}
keydown (e) {
// 阻止冒泡，阻止默认时间的触发
e.stopPropagation();
e.preventDefault();
const ev = e || window.event; //标准化事件处理
console.log(ev)
}
