微信小程序踩坑记之input

好久没有写过博客了，感觉生疏了，其实是变懒了。

近日，在公司做微信小程序开发，使用的是原生小程序，没有用框架，在来公司没接触过小程序的开发，所以原生来的实在（学习成本低）。

背景说明：不是初期开发者，是后来进来公司维护和新加功能的

好了，好像废话太多了，正式开始bindblur="getImgCode"

先贴代码

<view class="form-group">
   <input type="text" value="{{imageValue}}" name="imageValue"  bindinput="get_code"
          confirm-type="done" class="form-input" placeholder="请输入图片验证码" />
   <image class="image" src="{{imageUrl}}" bindtap="on"></image>
</view>  

  //获取图片验证码
   get_code: function(res){
    this.setData({
      imageValue: res.detail.value
    })
   },

 

是做登录页面的一个图片验证码的输入。正常就是这样取到这个input的值的，然而 事情总是不正常的，在开发者工具上可以取到值，在部分安卓机和部分ios机型就取不到值了，很是令人费解的一个问题，然后就是上开发者社区去看有没有相似的情况，有，贴图如下

 

果然有，但是官方并没有给出解答方案，就只有自己去弄了。找了半天又重新回归到小程序官方文档来了，看了input组件的说明，换了一个事件用bindblur来试，之前那批取不到值的安卓机型可以取到值了但是之前可以的正常机型却变的取不到值了。

所以想，能不能有两个事件来取值，于是代码是这样的

<view class="form-group">
    <input type="text" value="{{imageValue}}" name="imageValue" bindblur="getImgCode" bindinput="get_code"
           confirm-type="done" class="form-input" placeholder="请输入图片验证码" />
    <image class="image" src="{{imageUrl}}" bindtap="on"></image>
</view> 

//获取图片验证码
   getImgCode: function(res){
    this.setData({
      imageValue: (res.detail.value).toLowerCase()
    })
   },
  get_code: function (res) {
    this.setData({
      img_val: (res.detail.value).toLowerCase()
    })
  },
//取值
const input要取到的值 = that.data.imageValue || that.data.img_val;

这样，测试的真机型都能取到值，用逻辑 || 二选一，总有一个适合你。算是完美解决。

最后：废话确实有点多了，语法也没那么严谨，but希望能给遇到同样的问题的童鞋做个参考吧