胖蔡
2020年06月24日XUAO前端input,小程序,焦点触发8次阅读

小程序开发过程中的记录,input的部分方法在模拟器和真机上表现不一致

需求是要监听两个input框,如果都失去焦点则隐藏两个输入框,点击后重新出现。

两个input框之间的焦点切换模式为,其中一个获取焦点,则另一个先失去焦点,就存在同时没有焦点的时候,这个切换时间在不同机器上的表现时间是不一致的。开始我的想法是利用延时过滤掉这个时间差值,由于不能确定这个时间差值有多大,所以放弃了这个想法。然后想到catchtab绑定点击事件,即监听到input点击后默认input获取到焦点,不再监听input的焦点事件。实际上模拟器中 input的点击获取焦点执行的顺序是先 bindfous回调,再执行catchtap回调,模拟器上实验失败,又一个想法可能被抛弃。不甘心的我需要先了解input的事件触发顺序,于是就查阅了部分资料,发现一个写的比较全的博客(小程序input组件事件tap、input、focus、blur触发顺序),介绍了事件的触发顺序,其中有讲到真机与模拟器的差异,于是我就在真机上验证了我的第二个想法,确实可行。

<input catchtap="catchtapLow" focus="{{salaryLowFocus}}" bindfocus="salaryLowFocus" bindblur="salaryLowBlur" />

可以点击查看我写的代码片段

参考文献

名称 作者
小程序input组件事件tap、input、focus、blur触发顺序 哪儿花开
微信官方文档.小程序 developers.weixin.qq.com