小程式 textarea、input 層級過高,導致填寫內容穿透,z-index無效問題解決方案。
阿新 • • 發佈:2019-02-04
小程式的textare、input輸入框層級是最高的 那麼我們在textare、input輸入的內容就會總是顯示在最上一層。
這是時為什麼呢?官方文件有說明,因為textare、input這些是原生元件。原生元件的層級是最高的,不管其它非原生元件z-index設定多大,原生元件都無法覆蓋在原生元件上。想了很久終於想到個辦法,但是並不完美。
思路:textarea輸入完成時,將textarea隱藏,將輸入內容顯示在一個text文字框,此時頁面沒有原生元件textarea,底部的價格浮層就可完美遮住輸入內容。當點選text輸入框時,又將text隱藏,顯示textarea,並將textarea的焦點選中,這樣又可以繼續輸入內容。這樣就不會有穿透問題。
WXML:
JS:
page({ data: { onFocus: false, //textarea焦點是否選中 isShowText:false, //控制顯示 textarea 還是 text remark: '', //用於儲存textarea輸入內容 }, onShowTextare() { //顯示textare this.setData({ isShowText: false, onFacus: true }) }, onShowText() { //顯示text this.setData({ isShowText: true, onFacus: false }) }, onRemarkInput(event) { //儲存輸入框填寫內容 var value = event.detail.value; this.setData({ remark: value, }); }, })
就是這樣就不完美的解決了textare穿透的問題了,輸入完成滾動頁面,底部價格浮層都可以完美遮住輸入框內容(因為此時並沒有輸入框,只有text文字框,當然不會出現層級穿透問題了)。但是當用戶在textarea正在輸入時,滾動頁面此時顯示的是textarea,並沒有輸入完成觸發事件用text替換textarea。此時任然存在穿透顯示問題。
這就是我能想到的解決辦法了。0.0 如有不足或更好的解決方案,歡迎留言交流。