需求:在输入时,在输入框后边显示一个清空符号,点击清空符号可以清空输入框中的值。
我自己的实现方法:
wxml:
...
<image src="../../img/clean.png" hidden='{{!e_inputed}}' bindtap='e_cleanInput'></image>
<input value='{{v_input}}' bindinput="f_input" />
...
js:
// 绑定输入
f_input: function (e) {
this.setData({
v_input: e.detail.value
});
if (e.detail.value === '') {
this.setData({
e_inputed: false
})
} else {
this.setData({
e_inputed: true
})
}
},
// 绑定清空
e_cleanInput: function () {
this.setData({
e_inputed: false,
v_input: ''
});
},
问题:在value属性中使用v_input,然后在bindinput 方法 f_input 对 v_input 进行赋值,如果输入的的比较快,会出现输入内容闪烁,导致输入内容错误的问题。(快速删除时也会出现;Android和开发者工具都不会出现,iOS上会出现)
不止我一个人遇到了,见https://developers.weixin.qq.com/community/develop/doc/00026e5caa0c3053c5ea8e6fb56800;
现在是我找不到一个哪怕能临时用用的解决方案,官方老哥来帮帮忙啊。
都2023年了 居然还没有清空按钮。三大框架输入框都有的
我用form表单做的,你自己看看符不符合你的需求
https://developers.weixin.qq.com/s/GEND3lmN7HkT
<image src="../../img/clear.png" a:if="{{keyword}}" catchTap="clearInput" class="clear"/>
<input placeholder="输入关键词或样本编号" value="{{keyword}}" onInput="hasKeyword" placeholder-class="place" class="input1" />
clearInput() {
this.setData({
keyword: ''
})
},
但是这个onInput="hasKeyword"里边也是需要对keyword赋值的吗?像这样:
如果是这样的话,小程序有bug,输入快的时候内容是错的。我就是因为这个bug才头疼
hasKeyword: function(e){
this.setData({
keyword: e.detail.value
});
}
就像这样,https://developers.weixin.qq.com/community/develop/doc/000662f6bf48c8ed515aa98af5b800?page=1#comment-list
微信半年了都没修好这个bug,真是难搞。。。
当然还是谢谢老哥