今天做项目的时候需要监听页面的键输入,根据键值来做相应的处理。
这个应该很简单啊,监听keydown或者keypress事件,通过event.key 或者 event.charCode 来判断输入的是什么键。
但是做了半天发现,监听不到keydown 事件,keydown, keyup, keypress都试了,都是一样不进入方法
找了好久的方案才解决,先说解决办法:
就是在监听事件的div上添加 tabindex=0 属性。
问题解析:tabindex到底是啥东西:当使用键盘时,tabindex是个关键因素,它用来定位html元素。tabindex有三个值:0 ,-1, 以及大于0 的数字(通常也要小于32767,否则跟0一样)
理解:也就是说,只有有了tabindex, div元素才能被聚焦,才可能在这上边有keyboard事件。默认情况下只有input元素和a标签才能聚焦。有了tabindex属性,则所有的元素都可以被聚焦,都可以有keyboard事件
当tabindex=0时,该元素可以用tab键获取焦点,且访问的顺序是按照元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺序,依然是按照html文档中的顺序来定位。
当tabindex=-1时,该元素用tab键获取不到焦点,但是可以通过js获取,这样就便于我们通过js设置上下左右键的响应事件来focus,在widget内部可以用到。
当tabindex>=1时,该元素可以用tab键获取焦点,而且优先级大于tabindex=0;不过在tabindex>=1时,数字越小,越先定位到。
记录下,方便以后查询复习!