收藏
回答

怎么实现点击输入框后的一个图标,清空输入框内容?

需求:在输入时,在输入框后边显示一个清空符号,点击清空符号可以清空输入框中的值。

我自己的实现方法:

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


现在是我找不到一个哪怕能临时用用的解决方案,官方老哥来帮帮忙啊。

回答关注问题邀请回答
收藏

2 个回答

  • /迷茫的人生/
    /迷茫的人生/
    09-14

    我用form表单做的,你自己看看符不符合你的需求

    https://developers.weixin.qq.com/s/GEND3lmN7HkT

    09-14
    有用
    回复 1
    • 就这样🐳🐳
      就这样🐳🐳
      09-14
      谢谢老哥,我先试试。这个能规避掉input组件中value属性那个bug么?
      09-14
      回复
  • ?
    ?
    09-14

    <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: ''

    })


    },


    09-14
    有用
    回复 5
    • 就这样🐳🐳
      就这样🐳🐳
      09-14
      还有input组件里边还有onInput这个属性? 文档上咋没写啊
      09-14
      回复
    • ?
      ?
      09-14回复就这样🐳🐳
      我这是钉钉语法 你换成bindtap就行了。。。a:if换成wx:if
      09-14
      回复
    • 就这样🐳🐳
      就这样🐳🐳
      09-14回复?
      先谢谢老哥。
      但是这个onInput="hasKeyword"里边也是需要对keyword赋值的吗?像这样:    
      如果是这样的话,小程序有bug,输入快的时候内容是错的。我就是因为这个bug才头疼
      09-14
      回复
    • ?
      ?
      09-14回复就这样🐳🐳
      binginput对监听输入框内容。
      09-14
      回复
    • 就这样🐳🐳
      就这样🐳🐳
      09-14回复?
      如果是要在hasKeyword方法里对keyword赋值(就像我写的那样),这样不行的会触发这个bug。
      就像这样,https://developers.weixin.qq.com/community/develop/doc/000662f6bf48c8ed515aa98af5b800?page=1#comment-list
      微信半年了都没修好这个bug,真是难搞。。。


      当然还是谢谢老哥
      09-14
      回复
登录 后发表内容
问题标签