背景
UI设计如下图
代码实现
我的代码实现是监听bindinput事件,将输入框中的值this.setData({inputValue}), 清除按钮监听点击事件,触发后this.setData({inputValue: ''})
问题
android手机上存在一个问题,当input组件是focus状态时,点击清除按钮输入框会闪一下,键盘保持弹出状态,输入框中的内容并没有删除,再次点击后才能删除, 开发者工具和ios均没有上述问题
解决
我发现出现上面的问题是因为在点击清除按钮时额外的触发了一次bindinput事件,将输入框中的值又重新赋值给inputValue了,我一开始以为,额外触发bindinput事件是因为input失焦导致的,但是后面又发现我点击空白的地方并不会触发bindinput事件
后来我发现是setData导致的,找到了原因就可以对症下药了,查看开发文档发现bindinput的返回值中有一个keyCode属性,这个属性只有在键盘输入的时候才会有,用于记录输入的键值,所以我在bindinput中加了一层判断,如果有keyCode这个属性才会进行后面的运算。
缺陷
在开发者工具中使用键盘输入bindinput的返回值中并没有keyCode这个属性,所以在调试时就会存在输入的值并不会赋值给inputValue,需要注释对keyCode的判断。
疑问
上面的问题只会在input组件是focus状态时才会出现,如果一开始不是focus时直接点击清除按钮并不会出现上述问题,所以这个bug可能还和同时监听bindinput和bindblur或者bindfocus有关,这个有待后面进行验证