微信小程序踩坑記之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但願能給遇到一樣的問題的童鞋作個參考吧