最近在开发微信小程序添加用户收货地址时,产品经理提了需求:
失去焦点时,清除按钮消失;
点击清除按钮时,将输入框内容清除;
然后我就按照这个逻辑开始开发了,但是开发完后,并没有达到预期的效果:第一次点击清除按钮时,输入框的内容并没有消失,而清除按钮却不见了,又点击了一次输入框,然后输入框的内容就消失了。后来经过调试发现,第一次点击清除按钮时只触发了失去焦点事件,并没有触发点击事件,又在其他地方点击,这时输入框的内容就消失了。
然后就猜测是优先触发了失去焦点事件。
解决办法:
就是对失去焦点事件进行延迟触发,使用setTimeout,此坑及解决方法,同样会在微信小程序外出现和适用,代码如下:
addressAdd.wxml
<input type="text" placeholder="姓名" value="{{name}}" bindinput="handelChange" bindfocus="showClear" bindblur="hideClear"/>
<view bindtap="close">
<image wx:if="{{name.length>0 && showClear}}" mode="scaleToFill" src="../images/close.png"/>
</view>
addressAdd.js
Page({
data: {
name: '',
showClear: false
},
handelChange(e) {
this.setData({
name: e.detail.value
})
},
//清空文字
close(e) {
this.setData({
name: ''
});
},
//获取焦点,显示清空按钮
showClear(e) {
this.setData({
showClear: true
})
},
//失去焦点,隐藏清空按钮
hideClear(e) {
setTimeout(() => {
this.setData({
showClear: true
})
}, 100)
}
})