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,网上有对其不同值产生的影响的文章
如果只是为了实现当前业务,取一个正常数值都可以
当你鼠标聚焦在这个在搜索区域内的时候,按下回车键就可以触发业务代码,鼠标不在这个区域,按下回车按钮不触发