相信做微信小程式的碼友們都被textarea這個原生元件坑過，什麼placeholder位置錯亂，穿透彈窗或遮罩層，ios上輸入法彈起後換行輸入內容遮擋，刪除輸入內容時內容被遮擋等等。。。

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

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

填坑步驟1：

　　解決頁面滾動時placeholder/輸入內容不隨textarea元件滾動，經多方嘗試，出現這種情況是textarea的某個父級元素設定了overflow屬性，去掉所有父級元素的overflow屬性即可解決

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

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

  填坑步驟3：

 　　解決ios上輸入法彈起後換行輸入內容遮擋，刪除輸入內容時內容被遮擋問題　　第二步驟完成時在安卓機上已經能很完美的使用textarea了，可在坑b的ios上還是無一例外的出現了各種奇怪問題。輸入法彈起輸入到第三行時底部的結算欄上去了，輸入內容直接跑結算欄裡還穿透了！！！輸入多行刪除輸入內容時內容直接被輸入法彈窗遮擋了！！！奮戰許久填的坑，在ios上全線潰敗，這讓我情何以堪！！（實在忍不住，說了這麼多廢話。。。）　　多方嘗試給textarea的父級元素加個margin-bottom，並且這個值足夠大在ios就不會出現這種問題，於是嘗試在展現textarea加大textarea的父級元素加個margin-bottom，展現替代元素時再將這個值恢復原值，心心念念寫好了程式碼以為解決了，現實又給了我一記響亮的大耳刮。原設有margin-bottom行，後改的不認、不認、不認呀！！加了個setTimeout發現加大textarea的父級元素加個margin-bottom後要將頁面滾動到底部此時再彈出輸入法就可以了。     綜上，步驟3就是要給textarea的父級元素加個margin-bottom，具體多少視情況而定（反正不夠就一直加唄），在點選替代元素後先給textarea的父級元素加個margin-bottom，然後將頁面滾動到底部，最後再展現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;' 　　　　}); 

　　} }

　　碼字不易，轉載請註明出處https://www.cnblogs.com/growupup/p/9799507.html