一个在微信小程序 input 输入框遇到的坑

时间:2024-02-25 11:21:38

前几天在做两个简单的页面,以为应该很快就能完成,没想到由于各种原因导致最后我完成的不好,还被批了,其中有一个原因就是在实现搜索的时候我遇到坑了,被拖住很久,虽然是一个比较小的问题,可能对于别人很快就能发现问题出在哪里吧,但是当时的我心急如焚,想着快点弄完,头脑发热,冷静不下来,就在那里胶着,后面决定先上线,把这个 bug 延后处理,过了几天之后,我去处理,发现我竟然被这么简单的一个小 bug 拖了这么久,想想确实该骂。

说了这么多,其实就是做的一个实时搜索框,用户输入的时候实时搜索,所以就要监听输入框的 input 事件,但是!当用户输入后点击其他位置隐藏输入法键盘,居然还会调用 input 事件,这样的话在某些特定的场景就会出现问题,比如我那个需求,用户输入后实时搜索出现结果,然后用户点击取消按钮的同时输入法键盘也会被隐藏,可想而知,取消之后又调用了一次接口,如果你取消是为了把搜索结果清空,但是输入法键盘隐藏之后又回调用一次接口,数据又会回来了,就是这么一个小 bug,困扰了我好久。后面明白出现 bug 的原因之后,通过简单使用 blur 和 foucs 事件去判断输入框是否调用接口解决了这个小 bug。所以,不仅仅要提高自己的编程能力,更要提高自己的心理素质,比如处变不惊的那种心态。

好了,今天这篇算是为了凑 flag 吧,每周至少一篇,看起来好像挺简单,但实现起来对于我还是挺有难度的,算是一个小记录吧,晚安!