给div添加keyup事件

工作中遇到一个问题，需要给某个div添加keyup事件

直接给div添加keyup事件是无效的，因为div默认情况下是无法获得焦点的，可以给div加上 tabindex属性使其具有获得焦点的能力

<div tabindex="0"><div>

---

tabindex属性的一些了解

• tabindex为全局属性，所有元素上都可以添加；tabindex的值为整数。
• 值为负值时，无法通过Tab键给元素添加焦点

<!-- 无法通过Tab切换获得焦点 -->
<div tabindex="-1"></div>

• 值为0时，表示该元素可以通过键盘tab来聚焦，其顺序由文件的先后顺序来进行定义

<!-- Tab切换时获取焦点的顺序为 1 -> 2 -->
<div tabindex="0">1</div>
<div tabindex="0">2</div>

• 值为正值，会根据值的大小依次获得焦点。（尽量避免tabindex的值大于0，可能会使一些辅助设备难以阅读和操作页面内容）

<!-- Tab切换时获取焦点的顺序为 1 -> 2 -> 3 -->
<div tabindex="3">3</div>
<div tabindex="2">2</div>tabindex

<div tabindex="1">1</div>

• 给一个元素添加tabindex属性并不会使他的子元素获得焦点，如果子元素也需要获得焦点，可以给其子元素添加tabindex属性

<!-- 切换到.parent时 焦点在parent上 -->
<div class="parent" tabindex="0">
	<div>child</div>
</div>

一些应用

1. div模拟select下拉框时，会有一个失焦收起下拉框场景，可以给div添加tabindex属性，此时该DOM就具有了失焦事件。

<div class="select-title" tabindex="0"></div>
<div class="select-drop">
	<div class="select-dropItem"></div>
</div>

$(document).('blur', '.select-title', function () {
	// ...
})

参考

1. MDN web docs tabindex