小程序 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  如有不足或更好的解决方案,欢迎留言交流。

posted @ 2019-02-19 10:30  奔跑的太阳花  阅读(6290)  评论(0编辑  收藏  举报