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

系统管理员 2022-04-23 14:02 79阅读 0赞

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

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

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

本文案例功能：

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

HTML

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][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元素获取焦点

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][https_developer.mozilla.org_zh-CN_docs_Web_HTML_Global_attributes_contenteditable]

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

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

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

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

说明：

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

[https_developer.mozilla.org_zh-CN_docs_Web_HTML_Global_attributes_tabindex]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex
[https_developer.mozilla.org_zh-CN_docs_Web_HTML_Global_attributes_contenteditable]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable