今天要和大家分享一下开发微信小程序过程中，使用input组件时遇到的坑。阅读本文可了解input组件的bindinput和bindblur事件之间的区别；了解真机调试小程序的过程；了解编写bindinput事件的绑定函数时可能遇到的坑。
1.问题描述
项目中的登录页面中的input组件在输入后，不能立刻获取到值，但是稍微隔一段时间则能够获取到值。例如输入手机号后立刻点击获取验证码的按钮则提示"请输入手机号"，输入验证码后立刻点击登录提示"请输入验证码"。
2.原因分析
基于问题的表现，初步分析是给input绑定的事件不对。笔者起初给input组件绑定的是bindblur事件，也就是在输入框失去焦点时触发（因为当时对业务逻辑理解有误，认为失去焦点时要进行校验）。当失去焦点时会使用setData给手机号或者验证码对应的字段赋值，由于setData的特性，当立刻点击按钮获取手机号或者验证码的时候就拿不到值。
所以修改绑定事件为bindinput，这样在键盘输入时或者内容改变时就执行相应回调函数修改手机号或者验证码，这样从事件的执行时序上看来bindinput要比bindblur优先。下图为官方文档的说明：
手机号部分原来的代码：
修改为：
修改完要进行真机调试，验证一下这样修改是否能解决问题。
3.解决过程
3.1 真机调试的设置
要使用真机调试解决问题，需要点击开发者工具上方的[【真机调试按钮】
点击按钮后，如果有如下弹窗则需要修改【本地设置】，开启将JS编译成ES5：
点击右上角【详情】，点击【本地设置】勾选【将JS编译成ES5】，如下图所示：
3.2 真机调试的过程
如下图所示进行真机调试的时候，输入数字结果显示"[object Pro"：
于是对比了一下自己写的代码和官方文档中的代码，自己竟然没看出来问题：
细心的读者会发现，笔者写的handleInput方法前面有一个async。为什么会有async？ 因为在这个handleInput方法原来是有一段使用await的异步调用的代码，当时那段代码在的时候输入框是没有这个显示"[object Pro"的问题。后来因为改代码，把那段异步调用的代码搬到别的函数中了。那么为什么有这个async，input组件在使用时就有问题呢？
查了一下资料，文章中是这么说的：由于bindinput方法会自动返回当前input输入的值，而当bindinput绑定的方法是一个async异步函数的时候则返回的是promise对象，所以导致输入框内反显为“[object promise]”。原来如此啊，解决办法很简单：把async去掉。
删掉async重新进行真机调试，输入手机号后立刻点击获取验证码按钮，可以成功获取到手机号并调用发送验证码按钮，如下图所示：
总结
input组件看似简单，但是用不好就是坑，所以在开发过程中需要多多实践，多多比较，多多思考。总结一下本文的要点：第一，bindinput是在键盘输入时或者内容改变时触发而bindblur是在输入框失去焦点时触发，触发时机较比bindblur要晚；第二，如果bindinput绑定的函数为async修饰的异步函数则胡导致输入框反显为[object promise]。
