自定义的弹出框无法遮盖textarea文本内容
发布于 6 年前 作者 cdu 20105 次浏览 来自 问答

这是在 开发者工具上展示的，自定义的弹出框可以覆盖textarea文本

__
__

__ 下面是手机上显示的，textarea文本漂浮在自定义的弹出框上，点击有文本的地方，弹出软键盘__

__
__

下面是文本的代码

<view class="weui-cells__title">您的留言</view>
<view class="weui-cells weui-cells_after-title">
     <view class="weui-cell">
        <view class="weui-cell__bd" style="z-index: 100">
            <textarea  placeholder="请输入您的留言" style="height: 5em;" value="{{ qrNote }}" bindinput="qrNoteBindinput"/>
        </view>
    </view>
</view>

下面是自定义弹出框的代码

<!-- 自定义软键盘 -->
   <!-- 遮罩层 -->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{ showModalStatus }}"></view>
   <!-- 弹出框 -->
<view animation="{{ animationData }}" class="drawer_box" wx:if="{{ showModalStatus }}">
  <view class="numberBody">
    <label wx:for="{{ numbers }}" class="numberBox" bindtap="selectNumber" data-number="{{ item }}">
      {{ item }}
    </label>
  </view>
  <view class="letterBody">
    <label wx:for="{{ Letters }}" class="letterBox" bindtap="selectLetter" data-letter="{{ item }}">
      {{ item }}
    </label>
  </view>
</view>

下面是弹出框的js代码

powerDrawer: function (e) {
  console.log(e)
  let currentStatu = e.currentTarget.dataset.statu
  this.util(currentStatu)
},
util: function (currentStatu) {
  /* 动画部分 */
  // 创建动画实例
  let animation = wx.createAnimation({
    duration: 200,
    timingFunction: 'linear',
    delay: 0
  })
 
  this.animation = animation
  animation.opacity(0).rotate(0).step()
  this.setData({
    animationData: animation.export()
  })
  setTimeout(() => {
    animation.opacity(1).rotateX(0).step()
    this.setData({
      animationData: animation
    })
 
    if (currentStatu == 'close') {
      this.setData({
        showModalStatus: false
      })
    }
  }, 200)
 
  if (currentStatu == 'open') {
    this.setData({
      showModalStatus: true
    })
  }
},

下面是css样式代码

.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #fff;
  opacity: 0;
  overflow: hidden;
}
 
.drawer_box {
  width: 100%;
   overflow: hidden;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 9999;
  background: #999;
}
 
.numberBody {
  margin: 0px 0px;
  text-align: center;
}
 
.numberBox {
  background-color: #fff;
  display: inline-block;
  border-radius: 2px;
  width: 7.5%;
  color: #000;
  padding: 5px 0px;
  margin: 0px 4px;
  margin-top: 12px;
  text-align: center;
  font-size: 34rpx;
}
 
.letterBody {
  margin: 0px 0px;
  text-align: center;
  padding-bottom: 25rpx;
}
 
.letterBox {
  background-color: #fff;
  display: inline-block;
  border-radius: 2px;
  color: #000;
  padding: 5px 2.8%;
  margin: 0px 1.2%;
  margin-top: 12px;
  text-align: center;
  font-size: 32rpx;
}

可能有表达不清楚的地方请指出。

8 回复

对呀 小明同学 ，不过我没试过

好吧，我目前的解决方法是 当弹出框显示的时候，就隐藏textarea，您说的这个 等以后有空 在试下，谢啦！

官方说是底层的东西 也不好解决。只能我们在应用层解决。。。。。

弹出框用cover-view试试吧

您说用cover-view，是指弹出框用cover-view来实现？

可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view   cover-view不行

我遇到的问题是，textarea直接影响我的弹出视图的点击事件了（父视图）会优先聚焦。。。。不知道楼楼主有遇到过没有

tip: textarea 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。

试试 cover-view 吧

回到顶部