微信小程序之踩坑之旅二，textarea 組件的 bug

微信小程序公測也有段時間了，可是裏面的坑踩了一個又一個，心也是夠累的。本文說說關於 textarea 組件的 bug。（注：本文說起的 bug，至少在 2016-12-1日還存在）

上一篇：微信小程序之踩坑之旅一，wx.request 和 wx.uploadFile

測試時使用到：

• 微信web開發者工具 v0.11.112301

• 手機預覽，iPhone6s，微信6.3.31

在平常的開發過程當中，textarea 被使用到的頻率仍是挺高的，且不少狀況須要用 Javascript 去控制它的一些行爲，本文將舉一個例子，去說說這個你們在開發中均可能會遇到的坑。

需求：清空 textarea 組件的內容。

需求是多麼的簡單，實現起來想一想都以爲好簡單（偷笑.jpg），有童鞋立刻舉手回答，提出了一個解決方案。

方案1

• 搭配 form 組件使用

• form 組件綁定 bindreset 事件

• 添加一個 button 組件，指定 formType 爲 reset

• 須要重置時就點擊一下這個 button

缺點

??的確，方案1是徹底能夠作到清空 textarea 組件，但卻不夠靈活。

• 當一張表單有 n 個字段，而我恰恰只須要清空 textarea 組件內容時

• 當使用場景沒有一個重置的 button 組件時

• 不知道你還想到其餘什麼缺點？

方案2

有童鞋又回答，可使用數據綁定功能，將 textarea 組件的 value 屬性綁定到一個數據屬性，這樣當要清空 textarea 組件的內容時，只須要對綁定的數據屬性作空字符串值賦值操做便可。

??，上面這位童鞋說到點上了，和不少如今流行的 MVVM 框架同樣（諸如 vue、ng一、ng2等），小程序也具有了數據綁定的功能（感動.jpg），那麼下面就使用這種方式去完成這個如此簡單的需求吧。
（吐槽：但對比那些框架，我以爲這個小程序的數據綁定功能用起來有點殘廢的感受，可能被 vue 慣壞了）

對比圖

方案已經說了，但既然說是踩坑之旅，那麼確定就沒有方案所說的那麼簡單，沒點坑就不像話了，下面會提供四張動圖，都是根據方案2去處理的，請仔細對比。

在微信web開發工具時，全部實現方式：

你會看到：

1. 方式1，清空不了 textarea 組件的內容

2. 方式2，能夠清空內容

3. 方式3，能夠清空內容

上面說到方式2和方式3均可以清空內容，那麼爲何會有方式3這種「搞笑」的寫法呢？由於方式2這種寫法在手機預覽時會有 bug，挺可笑的 bug，詳細能夠看第3、第四張運行圖。

在手機預覽時，方式1：

跟在開發工具運行時的狀況同樣，也是清空不了。

在手機預覽時，方式2：

這就是的bug，清空是沒問題的，但童鞋們能夠留意一下 textarea 組件的 placeholder 的變化，清空以後，一時有一時沒有，爲了解決這個 bug，因而就有了方式3的寫法。

在手機預覽時，方式3：

加了個 setTimeout，在300毫秒後再將綁定的屬性設置爲空字符串。

看到這裏，相信童鞋們都知道是怎麼回事了，又是時候吐槽一下微信開發團隊了，你丫快點修復這種莫名其妙的 bug！

代碼

有人說不上代碼不厚道，其實更想你們去個人倉庫看，由於順手就能夠 star 一下，哈哈哈。

處理頁面的js，test.js

Page({
  data: {
    inputContent: ''
  },
  clearInputContent(e) {
    const mode = parseInt(e.target.dataset.mode)

    switch (mode) {
      case 1:
        this.setData({
          inputContent: ''
        })
        break;
      case 2:
        this.setData({
          inputContent: ' '
        })
        this.setData({
          inputContent: ''
        })
        break;
      case 3:
        this.setData({
          inputContent: ' '
        })
        setTimeout(_ => {
          this.setData({
            inputContent: ''
          })
        }, 300)
        break;
    }
  }
})

頁面UI，test.wxml

<view style="width: 90%; margin: 20rpx auto 0;">
    <text>textarea 組件 bug</text>
    <textarea placeholder="input content" value="{{inputContent}}" style="margin-top: 30rpx; border: 1rpx solid #ddd; width: 100%;"/>
    <text style="color: #999; font-size: 28rpx;">上面的 textarea 組件 綁定了 inputContent 屬性</text>
</view>

<view style="width: 90%; margin: 50rpx auto 0;">
    <button bindtap="clearInputContent" data-mode="1">清空內容 方式1</button>
    <text style="color: #999; font-size: 28rpx;">方式1，執行 this.setData({inputContent: ''})</text>
</view>

<view style="width: 90%; margin: 50rpx auto 0;">
    <button bindtap="clearInputContent" data-mode="2">清空內容 方式2</button>
    <text style="color: #999; font-size: 28rpx;">方式2，
    執行 this.setData({inputContent: ' '})
    執行 this.setData({inputContent: ''})
    </text>
</view>

<view style="width: 90%; margin: 50rpx auto 0;">
    <button bindtap="clearInputContent" data-mode="3">清空內容 方式3</button>
    <text style="color: #999; font-size: 28rpx;">方式3，
    執行 this.setData({inputContent: ' '})
    執行 setTimeout(_ => { this.setData({inputContent: ''}) }, 300)
    </text>
</view>