本文背景
在之前我的答题小程序,增加了填空题的支持,但是一直有一个问题,没有得到解决,就是用户在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
本文总结
本文首先提出在生产小程序遇到的问题,然后针对这个问题归结到文本框三种取值方案,并且给出能解决问题的两个方案。
我也发现很多原生组件bindblur或bindchange存在延时情况,比如的bindchange事件延时情况可能长达1-2秒,所以在页面设计时得考虑有用户输入完马上点击提交的可能性。