评论

关于input取值问题漫谈

关于input取值问题漫谈

本文背景

在之前我的答题小程序,增加了填空题的支持,但是一直有一个问题,没有得到解决,就是用户在input输入填空题的答案后,点击提交按钮,input的值尚未落到this.data.inputValue里面

具体如下图所示

f

f

填空题的答案输入完成后,点击提交按钮,这个时候input的值尚未取到,也就是没有落到this.data.inputValue上,目前小程序使用的方案是bindblur

f


本文内容

本文主要提出input取值的三个方案,

1、bindblur

2、bindinput

3、双向绑定

https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html

经过今天的代码实践检验

1、bindblur方案在提交的时候尚未落值,

2、方案2、3是可以的,点击提交按钮时,已正常取到input的值

目前生产代码如下所示

f

f

对了,对于bindblur在开发者工具调试是不会存在问题的,只有真机才有问题,这个是经过经验的,

具体代码片段如下所示

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


参考文章

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

简单双向绑定无法使用引用数据类型?

- 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000ce4654a09889b0c5af980751400

textarea 失去焦点(bindblur)响应比按钮点击慢,怎么提交表单?

- 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/00022076e08c90d00c96b3e0451c00

本文总结

本文首先提出在生产小程序遇到的问题,然后针对这个问题归结到文本框三种取值方案,并且给出能解决问题的两个方案。

最后一次编辑于  2020-08-10  
点赞 0
收藏
评论

1 个评论

  • 田沛
    田沛
    2020-08-10

    我也发现很多原生组件bindblur或bindchange存在延时情况,比如的bindchange事件延时情况可能长达1-2秒,所以在页面设计时得考虑有用户输入完马上点击提交的可能性。

    2020-08-10
    赞同
    回复 2
    • 田沛
      田沛
      2020-08-10
      比如picker-view的bindchange事件
      2020-08-10
      回复
    • 小肥羊🍊
      小肥羊🍊
      2020-08-10
      确实存在,不过目前有了双向绑定,这种问题可以得到圆满解决
      2020-08-10
      回复
登录 后发表内容