小程序textarea完美填坑

　　相信作微信小程序的碼友們都被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;'
　　　　});
　　　　wx.createSelectorQuery().select('.j_page').boundingClientRect((rect)=> {
　　　　　　console.log(rect)
　　　　　　// 使頁面滾動到底部
　　　　　　wx.pageScrollTo({
　　　　　　　　scrollTop: rect.bottom
　　　　　　})
　　　　　　this.setData({
　　　　　　　　multiShow: t_show
　　　　　　})
　　　　}).exec()
　　}
}

 

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