收藏
回答

textarea组件真机bug

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug textarea 客户端 7.0.3 2.6.1

问题描述: 页面上写一个textarea组件,再写一个popup弹层作为信息提示,结果发现textarea组件与页面其他组件不在同一个层级上,设置z-index样式为负值也不管用,只有原生wx.showToast()等接口的显示层级才能覆盖住textarea组件填写的内容,其他任何popup等弹层都不能遮住,设置z-index为10亿也没用;

wxml代码如下:

<view class='address-list-item'>
            <textarea class='input-textarea' auto-height='{{true}}' maxlength='50' placeholder='企业地址(这是一个有bug的组件,组件与页面其他组件不在一个zIndex)'></textarea>
        </view>

js代码

//提交表单
    formSubmit: function(e){
        let self = this;
        let formData = e.detail.value;
        console.log(formData);
        let phonecall = formData.phonecall;
        if (phonecall.length>0 && !Method.regCheck(phonecall,/^[0-9]{7,8}$/)){
            Toast({
                mask: true,
                message: '这是一个popup层,不能遮住有bug的textarea组件'
            });
            /*wx.showToast({
                icon:'none',
                mask:true,
                title: '能遮住有bug的textarea组件',
            })*/
            return;
        }
    },

真机截图如下:



回答关注问题邀请回答
收藏

4 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2019-03-06

    textarea是原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

    2019-03-06
    有用
    回复
  • 轩炀 Magnolia
    轩炀 Magnolia
    05-09

    我参考了这个方法,虽然有点出入,但感觉目前找到最好的

    https://www.jianshu.com/p/79c512cb0b35

    05-09
    有用
    回复
  • ~奔跑的蜗牛~*
    ~奔跑的蜗牛~*
    2019-03-06

    cover-view组件也不行啊

    2019-03-06
    有用
    回复 2
    • Smile
      Smile
      2019-03-07

      我试了可以,在开发者工具不可以,真机上可以

      <textarea style="height: 80px; width: 90%; margin: 0 auto; border: 1px solid #000" placeholder="输入内容"></textarea>

      <button bindtap="handleIsShowPopup" style="margin-top: 20px" type="primary">显示弹出层</button>

      <cover-view bindtap="handleIsShowPopup" style="display: {{show ? 'block' : 'none'}}; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); left: 0; top: 0;"></cover-view>

      Page({

          data: {

              show: false

          },

          // 显示/隐藏弹出层

          handleIsShowPopup () {

              let show = !this.data.show;

              this.setData({ show });

          }

      });




      2019-03-07
      回复
    • ~奔跑的蜗牛~*
      ~奔跑的蜗牛~*
      2019-03-07回复Smile

      可以啊,兄dei,谢谢

      2019-03-07
      回复
  • Smile
    Smile
    2019-03-06

    popup弹层里面用cover-view组件看看行不

    2019-03-06
    有用
    回复
登录 后发表内容