评论

关于自定义input输入框清空方法bug的解决方案

关于自定义input输入框清空方法bug的解决方案

前两天看到一个问题:input 聚焦时 侧边清空按钮(自定义的按钮)要点击两次才能把内容清空。(真机测试时遇到)

原贴:input 聚焦时 侧边清空按钮要点击两次才能把内容清空? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000884e3874360026098031ea5b000
通俗点就是说:自定义了一个清空的按钮,在input输入(聚焦)的时候,点击清空没反应。
这引起我强烈的好奇心了。

  1. 先考虑清空的按钮的事件有没有触发。
    我感觉是会触发的,因为之前有做过手机号发送验证码的,没试过输入手机号的时候,点击不能触发发送验证码的情况。
    测试后,果然,清空的按钮的事件是有触发,方法执行之后(setData),值是有改变了的。
    那么问题来了,最后value值为什么没有变化呢?
  2. 显然,还有其他的事件触发了,执行了setData。
    经过我反复的试验,bindinput触发了。bindinput,原来是它搞的鬼,为什么会触发bindinput?我就不清楚了,要问官方了。
    点击清空按钮,同时触发了两个事件,两个同时存到了队列里面,虽然bindtap的方法还未执行,但是参数值已经有了,e.detail.value的值就是原本输入框里面的值。所以,执行完两个事件之后的结果是,input的值没有发生变化,导致大家以为,清空事件没有触发,或者清空事件没有作用。
  3. 原因找到了,点击清空的时候,触发了bindinput。为什么会触发呢,怎么让它不触发呢,这就留给小程序去解决吧,不是我们用户能解决的了。我们要解决的是,怎么实现input聚焦时能直接清空。
    “只要思想不滑坡,办法总比困难多”。既然找到了原因,那解决办法肯定是会有的。我测试的时候发现,清空方法是比bingtap的方法先执行的,所以想到了一个解决方法:
    在data里面声明一个boolean变量值为false,在执行清空方法的时候,赋值为:true,执行bindtap方法的时候,判断该变量,为true就不执行setData操作了,为false则继续。
    代码:
    这样做,就算清空方法不是比bingtap的方法先执行的,也不会有影响。简单测试了一下,解决了。

总结:以上就是我对input输入框清空bug的探索过程,解决方法也是我想到的最简单的做法了。因为没有经过大量测试验证,所以不知道会不会有其他问题。要是有bug,或者有其他解决方法,欢迎各位大大留言。

点赞 5
收藏
评论

8 个评论

  • 一口浊酒
    一口浊酒
    2019-11-19

    我也遇到这个问题了,苹果机没有只有安卓机要重复删除两次才能删除掉,搞得头大搞了一上午了

    2019-11-19
    赞同 2
    回复 1
    • Äwens
      Äwens
      2019-12-11
      +1,难受
      2019-12-11
      回复
  • 「、皓子~
    「、皓子~
    2019-12-23

    解决思路:点击清空按钮是,先关闭键盘,键盘关闭后再清空值(真机没问题,开发平台无法清空值)

    解决办法: 在点击清空按钮时。调用wx.hideKeyboard(Object object)方法。在complete方法里进行清空。

    API地址: https://developers.weixin.qq.com/miniprogram/dev/api/ui/keyboard/wx.hideKeyboard.html



    2019-12-23
    赞同 1
    回复
  • ink
    ink
    2019-09-04

    我试着偶尔会不管用

    2019-09-04
    赞同 1
    回复
  • DuwEiQIAn_G!
    DuwEiQIAn_G!
    05-20

    setTimeout(() => { //延遲發送,防止input沒有清空

            that.setData(

              storageText: '',

            })

          }, 100)


    设置延迟清空就可以了,实测


    05-20
    赞同
    回复
  • 寒
    2019-12-17

    看看我的解决方案

    2019-12-17
    赞同
    回复
  • Do What's Worth.
    Do What's Worth.
    2019-12-02


    2019-12-02
    赞同
    回复
  • Do What's Worth.
    Do What's Worth.
    2019-12-02

    我的解决方法是:

    <input password value="{{password}}" placeholder="请输入密码"  focus="{{focus}}" bindinput="bindInput" bindblur="bindBlur" />
    <image src="../../images/close.png"  bindtap="clearPassword"></image>

    在clearPassword事件中,定义一个值(例如:this.data.click = true);当input失去焦点时,bindBlur事件判断this.data.click为true调用this.clearPassword();

    2019-12-02
    赞同
    回复
  • 🐋
    🐋
    2019-10-28

    只要试着改变input的value,首次bindinput都会被触发两次。

    微信这个真的坑到死

    2019-10-28
    赞同
    回复
登录 后发表内容