【JS】DOM 键盘事件 --div 元素 - 设置键盘事件 -- 失效的额外处理踩坑

作者：Sam9029

2022 年 9 月 13 日
四川
本文字数：1348 字
阅读完需：约 4 分钟

🦖我是 Sam9029，一个前端
Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)
**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

键盘事件

关于键盘事件，我们需要知道如下的 三种键盘事件绑定方式

keydown 任意键都监听
keyup 任意键都监听
（注意：上诉两项，对大小写字母触发不区分 ascii 返回码，皆返回小写的 ascii 码）
keypress （建议不用）
（注意：但是对大小写字母触发区分 ascii 返回码）
只监听有值键（字母，数字），
功能键(ctrl,shift,F1-F12,……)不监听

键盘事件对象

(三种绑定方式都会返回键盘的事件对象 event)

绑定键盘事件后，会有一个 KeyboardEvent 对象,
KeyboardEvent 对象,键盘事件对象包含了属性和方法

document.addEventListener("keydown", function (event) {
    // event 参数的类型为 KeyboardEvent
  	console.log(event);
});
//打开页面，按任意键

复制代码

KeyboardEvent 对象：

键盘事件绑定的注意

直接绑定时前加 on ，事件监听 addEventListener 可不用
任意键盘事件绑定到 document 上都可以打开页面后直接触发监听键盘
绑定到表单元素如 input 输入性质的元素上时，需要焦点聚集后，才会监听键盘
绑定到类似 div 非输入性质的元素上时，需要设置 tabindex=‘0/1’，且需要焦点聚集后，才会监听键盘

div 元素设置键盘事件的失效的额外处理踩坑

缘由：

在页面文档中，默认只有 a 标签以及 input 等表单元素（输入性质的元素）才能被焦点获取（选中）,及被键盘事件访问

解决方案：

在 div（非输入性质的元素）标签上设置 tabindex 属性 (可为 -1,0 ,1)
tabindex=-1 则是不可以被 tab 键获取焦点，即无法使用键盘事件
tabindex=0 / 1 则是可以被 tab 键获取焦点，即可以使用键盘事件
（ -1,0 ,1 的具体区别见参考文章一）

示范实例：

    <style>        #keybtn{            margin: 100px;            width: 100px;            height: 100px;            background-color: #eee;        }     </style>     <!--设置tabindex 使得div可被焦点获取 -->    <div id="keybtn" tabindex="1">        keybtn盒子    </div>    <input type="text" id="username">    <script>        var keybtn = document.querySelector('#keybtn');        var username = document.querySelector('#username');        //让 网页打开时 就聚焦div -- 若div不加tabindex属性（且值大于等于0），则无效        keybtn.focus()				//document        document.onkeydown = function(e) {            console.log('doc',e)        }
        //input        username.addEventListener('keydown',function(e) {            console.log(e)        });        		//div        keybtn.addEventListener('keydown',keydow);        function keydow(event){            console.log('btn',event)           }    </script>

复制代码

参考

div 的 keydown 事件无效的原因及解决方案、tabindex 属性的作用div绑定键盘事件
（很详尽-推荐看）掘金–JavaScript 键盘事件，附完整键码表

🦖我是 Sam9029，一个前端，坚信`应无所往`

文章若有错误，敬请指正🙏
**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**
Sam9029 的 InfoQ 主页:[Sam9029 (infoq.cn)](

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/a418162961eecc94f63003860】。文章转载请联系作者。

Sam9029

关注

庸俗 2022.09.03 加入

好色

发布

暂无评论

创作场景

【JS】DOM 键盘事件 --div 元素 - 设置键盘事件 -- 失效的额外处理踩坑

键盘事件

键盘事件对象

键盘事件绑定的注意

div 元素设置键盘事件的失效的额外处理踩坑

缘由：

解决方案：

示范实例：

参考

🦖我是 Sam9029，一个前端，坚信应无所往

Sam9029

评论

🦖我是 Sam9029，一个前端，坚信`应无所往`