相信做微信小程序的碼友們都被textarea這個原生組件坑過，什么placeholder位置錯亂，穿透彈窗或遮罩層，ios上輸入法彈起后換行輸入內(nèi)容遮擋，刪除輸入內(nèi)容時內(nèi)容被遮擋等等。。。

反正綜上所述我全遇到了，埋完一個坑又出一個新坑，在埋坑過程中數(shù)次想過放棄（就想跟老板說這是小程序的bug解決不了），但想想自己曾經(jīng)夸下的海口（沒有搞不定的，只有不想搞的），又默默地把手放在鼠標鍵盤上!

　　先上一個完美填坑后的效果圖:

填坑步驟1：

　　解決頁面滾動時placeholder/輸入內(nèi)容不隨textarea組件滾動，經(jīng)多方嘗試，出現(xiàn)這種情況是textarea的某個父級元素設置了overflow屬性，去掉所有父級元素的overflow屬性即可解決

 填坑步驟2：
　　解決textarea組件為原生組件層級最高，穿透彈窗或遮罩層。
　　這步應該是最復雜的了，網(wǎng)上有很多方法但都不盡如人意。此處的解決思路是設置一個跟textarea布局一致的替代元素，與textarea交替展現(xiàn)。當點擊替代元素時textarea展現(xiàn)，就可以輸入內(nèi)容，當textarea失去焦點時替代元素展現(xiàn)，將輸入值賦給替代元素，這樣不輸入內(nèi)容頁面滾動時就不會出現(xiàn)textarea穿透問題。

　　本坑注意要設置textarea自動聚焦（否則要點兩次替代元素才能拉起鍵盤），且兩個元素的切換要用wx:if,不能用顯示和隱藏

  填坑步驟3：

 　　解決ios上輸入法彈起后換行輸入內(nèi)容遮擋，刪除輸入內(nèi)容時內(nèi)容被遮擋問題
　　第二步驟完成時在安卓機上已經(jīng)能很完美的使用textarea了，可在坑b的ios上還是無一例外的出現(xiàn)了各種奇怪問題。輸入法彈起輸入到第三行時底部的結算欄上去了，輸入內(nèi)容直接跑結算欄里還穿透了?。?！輸入多行刪除輸入內(nèi)容時內(nèi)容直接被輸入法彈窗遮擋了！??！奮戰(zhàn)許久填的坑，在ios上全線潰敗，這讓我情何以堪！?。▽嵲谌滩蛔?，說了這么多廢話。。。）
　　多方嘗試給textarea的父級元素加個margin-bottom，并且這個值足夠大在ios就不會出現(xiàn)這種問題，于是嘗試在展現(xiàn)textarea加大textarea的父級元素加個margin-bottom，展現(xiàn)替代元素時再將這個值恢復原值，心心念念寫好了代碼以為解決了，現(xiàn)實又給了我一記響亮的大耳刮。原設有margin-bottom行，后改的不認、不認、不認呀?。〖恿藗€setTimeout發(fā)現(xiàn)加大textarea的父級元素加個margin-bottom后要將頁面滾動到底部此時再彈出輸入法就可以了。
     綜上，步驟3就是要給textarea的父級元素加個margin-bottom，具體多少視情況而定（反正不夠就一直加唄），在點擊替代元素后先給textarea的父級元素加個margin-bottom，然后將頁面滾動到底部，最后再展現(xiàn)textarea并拉起輸入法鍵盤
主要代碼：

<view class='bgcfff font28 padd30 new_borders1'style='{{areaHeight}}'>
　　<textarea wx:if="{{!multiShow}}" class='areaInput' bindblur="ifshowArea" data-show="yes" value="{{u_remark}}"bindinput='inputchange'maxlength="100" data-type="u_remark"auto-height placeholder="訂單備注(0/100)" focus="true" />
　　<view wx:if="{{multiShow}}" style='min-height:20px;color:{{areatext=="訂單備注(0/100)"?"#999":"#2b2b2b"}};' data-show="no" bindtap="ifshowArea">{{areatext}}</view>
</view>

data: {
　　areatext:'訂單備注(0/100)',
　　areaHeight: 'margin-bottom: 90rpx;',
　　multiShow:true,
　　u_remark:""
}, 
ifshowArea(e){ 
　　var t_show = e.currentTarget.dataset.show=="yes"?true:false; 
　　if (t_show){//不顯示textarea 
　　　　this.setData({ 
　　　　　　areatext: this.data.u_remark ? this.data.u_remark:"訂單備注(0/100)", 
　　　　　　areaHeight: 'margin-bottom: 90rpx;' 
　　　　}); 
　　　　this.setData({ multiShow: t_show }) 
　　} else {//顯示textarea 
　　　　this.setData({ 
　　　　　　areaHeight:' margin-bottom: 250rpx;' 
　　　　}); 
　　　　wx.createSelectorQuery().select('.j_page').boundingClientRect((rect)=> {
　　　　　　console.log(rect)
　　　　　　// 使頁面滾動到底部
　　　　　　wx.pageScrollTo({
　　　　　　　　scrollTop: rect.bottom
　　　　　　})
　　　　　　this.setData({
　　　　　　　　multiShow: t_show
　　　　　　})
　　　　}).exec()
　　} 
}