小程式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並拉起輸入法鍵盤
主要程式碼：
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