小程序 textarea、input 層級過高，導致填寫內容穿透，z-index無效問題解決方案。

小程序的textare、input輸入框層級是最高的 那么我們在textare、input輸入的內容就會總是顯示在最上一層。

這是時為什么呢？官方文檔有說明，因為textare、input這些是原生組件。原生組件的層級是最高的，不管其它非原生組件z-index設置多大，原生組件都無法覆蓋在原生組件上。想了很久終於想到個辦法，但是並不完美。

 

思路：textarea輸入完成時，將textarea隱藏，將輸入內容顯示在一個text文本框，此時頁面沒有原生組件textarea，底部的價格浮層就可完美遮住輸入內容。當點擊text輸入框時，又將text隱藏，顯示textarea,並將textarea的焦點選中，這樣又可以繼續輸入內容。這樣就不會有穿透問題。主要運用了textarea的bindblur（輸入框失去焦點觸發事件）、bindconfirm（輸入點擊完成觸發事件）、focus（獲取焦點 Boolean）。

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  如有不足或更好的解決方案，歡迎留言交流。