微信小程序踩坑记之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但愿能给遇到一样的问题的童鞋作个参考吧