没耐心的朋友,能够直接看代码。javascript
最近在作一个关于收银台的项目,其中有一个需求,是扫码枪扫描支付码进行支付。扫码枪触发的事件,实际上是一个keyup enter
事件,要捕获到这个事件,必须将焦点定在支付码输入框内才能够。java
inputEle=document.getElementById('focusInput'); inputEle.focus(); inputEle.onblur=function(){ inputEle.focus(); };
一开始的时候,定义焦点在文本框,当文本框失去焦点的时候从新定焦在文本框。很简单的方法,就实现了固定焦点的要求。code
后来这个页面上又多了搜索框和商品列表,那么,当焦点在其余文本框的时候,如何判断使其能正常输入呢?事件
起初,我仍是按上面方法去作,却发现,鼠标不管如何点击,document.activeElement(当前焦点坐在元素)
始终是body
元素。这样,就没法判断,焦点是否在文本框。因而我想到了用定时器来作,代码以下:ip
var focus=function(){ setTimeout(function(){ let activeElement=document.activeElement; if(activeElement.type!=='text'){ inputEle.focus(); } focus(); },60); } focus();
定时器每隔60ms检查一次,当发现焦点不在文本框里,则定焦到最初的文本框,不然不改变焦点。get
用上面两种方法,基本上就能够知足全部固定焦点的状况了。input