收藏
回答

输入框blur事件与按钮click事件的先后顺序问题?

页面上有一个 input组件和一个按钮组件,分别设置了blur事件和click事件。用户操作是input里面输入文字,然后点击按钮。

wxml (用的是vant组件库)

<van-field required id="text1" value="{{ dto.text1}}" label="输入框" type="number" bind:blur="onblur" input-align="right"/>
<van-button type="info"  bind:click="btnClick" size="large">确定</van-button>

ts代码

    onblur(e: any) {
        console.log('onblur')
    },
    btnClick() {
        console.log('btnClick')

在IDE调试中,是先激发blur事件,再激发click事件,输出如下

onblur
btnClick

而在真机调试和体验版测试中,发现激发的顺序是倒过来的,输出如下

btnClick
onblur

这样,就无法实现在onblur中获取输入值,再提交数据的目的。

请教大神们,这种情况该如何处理?

我考虑过在click里面调用一个 settimeout把提交数据的代码延迟调用,但是这种方案非常丑陋。

另外搜索到一篇17年的帖子,是类似问题,没有解答

https://developers.weixin.qq.com/community/develop/doc/6ad9de49551036896daad16805b25ac2?_at=1655002302927

最后一次编辑于  2022-06-12
回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    2022-06-12

    你好,请先参考该帖:input的bindblur和button的bindtap事件顺序的问题?

    https://developers.weixin.qq.com/community/develop/doc/000420432ece402a2fbd404a35bc00

    若还有问题请提供小程序原生组件代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2022-06-12
    有用
    回复
  • 茜茜又困了🐽
    茜茜又困了🐽
    2022-06-12

    使用bindinput更新input绑定的值,这样就能避免你所描述的问题了

    2022-06-12
    有用
    回复 1
    • 洪华敏
      洪华敏
      2022-06-12
      嗯,只是我同时在blur里面做校验,比较了input和blur,感觉blur更符合。唉
      2022-06-12
      回复
  • Frank
    Frank
    2022-06-12

    用这个事件绑定input值呢,bindblur正常来做数据校验好些

    2022-06-12
    有用
    回复 2
    • 洪华敏
      洪华敏
      2022-06-12
      谢谢。我是写了个通用事件处理方法,实现了数据绑定dto对象并且做简单校验的功能,所以是在blur里面实现的,input做校验并不合适。其实感觉微信的input和change事件没有区隔好,如果有个类似web input组件的change事件就好了
      2022-06-12
      回复
    • Frank
      Frank
      2022-06-12回复洪华敏
      好吧,看看官方大大对于blur 和按钮click顺序这个咋说吧
      2022-06-12
      回复
登录 后发表内容