非表单元素添加键盘监听事件

div及其他非表单标签如何添加键盘监听事件?

input和一些表单标签是可以添加键盘监听事件

需求:在一个搜索区域内,只要按回车键就能够执行搜索功能

问题:搜索区域并不是一个表单元素,也不是整个window页面,而是一个div标签

导致无法在表单元素上注册事件,也无法在window上注册事件来监听键盘事件

解决方案:

在div标签上添加键盘监听事件来完成需求

尝试在div标签上添加键盘监听事件,发现无法触发事件

后来发现能够触发键盘监听事件元素只有那些表单元素,那些有onfocus属性的标签才可以触发键盘监听事件

如何来解决这个问题:

使用tabIndex这个属性

            <div tabIndex={1} id="searchBox">
            	...
            </div>

使用这个tabIndex这个属性后,普通元素就可以监听键盘触发的事件了

然后再react生命周期中添加监听事件和业务代码就可以了

    componentDidMount() {
        const searchBox = document.getElementById('searchBox')
        searchBox.addEventListener('keyup',(e)=>{ //注册键盘抬起事件
            if(e.key == 'Enter'){ //如果敲击的是回车
                this.props.onSearch() //业务代码
            }
        })
    },

tabIndex属性的值只能是数字,可以取正数,负数或者0,网上有对其不同值产生的影响的文章

如果只是为了实现当前业务,取一个正常数值都可以

当你鼠标聚焦在这个在搜索区域内的时候,按下回车键就可以触发业务代码,鼠标不在这个区域,按下回车按钮不触发