【JS】js下监听（非input等可获取焦点）元素的键盘按下事件(vue通用)

大部分键盘按下事件的监听是可获取焦点元素（input，button，textarea）可以生效，而当我们需要对不可获取焦点元素进行监听操作呢，本篇介绍一下不可获取焦点元素监听键盘按下的方法。

三种方式（以下介绍方法vue通用）

• 全局监听按键按下事件
• 使用tabindex
• 使用contenteditable

本文案例功能：

1. 当点击open时，open变为close，class改变
2. 当点击close或者按下键盘按键ESC时，close变为open，class改变

HTML

<div id="test1" class="open">open</div>

JS

var isKeyClose = false // 全局变量当前状态
// 切换的执行操作
function check(){
// 点击改变状态
 isKeyClose = !isKeyClose
 // 根据状态改变值
 if(isKeyClose){
   test1.className = 'close'
   test1.innerHTML = 'close'
 }else{
   test1.className = 'open'
   test1.innerHTML = 'open'
 }
}

一、 全局监听按键按下事件

document.onkeydown = function(e) {
	var keyCode = e.keyCode || e.which || e.charCode
	if(e.keyCode === 27 && isKeyClose){
	 check(); // 切换执行方式 
	}
}

二、使用tabindex

引用：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex

全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。

• tabindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。
• tabindex=“0” ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。
• tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定

总结就是：tabindex属性可以有获取焦点的功能，当设置为‘-1’时，不会因为使用键盘tab键影响

因此，我们可以使用tabindex让div元素获取焦点

<div id="test1" tabindex='-1' class="open">open</div>

test1.addEventListener('keydown',function(e) {
	// esc的code是27，并且当前isKeyClose是true时
	if(e.keyCode === 27 && isKeyClose){
	  check()
	}
})

三、使用contenteditable

引用：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable

全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。

该属性必须是下面的值之一：

• true 或空字符串，表示元素是可编辑的；
• false 表示元素不是可编辑的。

总结就是：contenteditable属性设置之后可以使元素可编辑，当可编辑时也是获取焦点的

<div id="test1" contenteditable='true' class="open">open</div>

说明：

1. tabindex和contenteditable：使用时都需要先对元素进行点击来获取焦点，再进行按键，
   可适用操作同一个元素的，例如：全屏和退出全屏，且全屏与退出全屏绑定的是同一个元素；
   对于不用点击就监听按键的不适用；
2. contenteditable：使用时会有编辑功能，当该元素不需要编辑时使用，会影响功能