微信小程序踩坑記之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希望能給遇到同樣的問題的童鞋做個參考吧