javascript中div不响应onkeydown事件问题及解决

这两周被js坑了好几次，所以最近几篇写写这个，记录下被坑的日子。

 

这次有一个需求，要做一个类似百度搜索之类的效果出来，输入拼音字母，直接列出与该拼音相关的中文结果。效果如下：

这里我是通过在js中动态添加div的方式来做的，即每一行结果一个div。问题来了，需要支持在输入框中按下向下键时光标即移到下一行的【充值金额查询（渠道）】。我给这些js写的div都注册了onkeydown事件，但就是不能触发该事件。

 

谷歌百度等之后搜到些有用的提示，要想div能够响应onkeydown onkeyup onfocus等事件需要达到两点：1.需要聚焦到该div，js代码写的话即div.focus()。2.需要设置该div的tabindex属性。于是又写了个例子：

 

<div id="a"><div id="b" tabindex="-1" onkeydown="alert("hhh");"></div></div>

果然可以。于是在js里面把该div对象的tabindex属性设置为一个整数，但！是！竟然还是没反应！

 

 

昨天爬山时还在想这个问题，按理说不能够啊，html里面明写可以，用js动态添加div应该也可以，唯一差别就是js添加属性而已。灵光一现，以前写js时常碰到的坑爹的问题是js里面对于内置的dom对象的属性是区分大小写的，有的组合单词的属性需要首字母大写。果然，js里面把tabindex改成tabIndex就可以了，

 

PS：关于这个问题这篇文章讲的不错《DIV焦点事件详解》