textarea层级穿透

1. 问题描述

##安卓机型在使用textarea的情况使用弹窗时无法遮盖textarea上的内容

手机类型	穿透
苹果	×
安卓	√

2.产生原因

产生原因：
我们可以看到原生组件的层级是无法通过z-index来设置的，因为原生组件层级最高小程序官方文档描述

3.怎么解决

首先我们无法通过小程序的层级来设置，那input呢？，input虽然没有层级限制但是input无法设置出textarea的效果。怎么办呢？
转变下思想，既然用户弹起对话框，那么我是不是可以在弹起对话框的时候将textarea转换成text，在移除对话框的时候在切换回来呢？

4.解决问题

// An highlighted block

<view class="containt" >
  <textarea wx:if="{{!isShow}}" maxlength="1000" show-confirm-bar="{{false}}" class="textarea" bindinput="input"  disable-default-padding="true" bindfocus="Focus" adjust-position="{{Position}}" hold-keyboard="true" bindconfirm="Check" value="{{textValue}}" ></textarea> 
  <text wx:else class="textarea">{{textValue}}</text>
</view>
<button  bindtap="change"  class="btn">
点我切换
</button>

<view  hidden="{{!isShow}}" class="alert-mask"></view>
	<view class="popView" hidden="{{!isShow}}">
			<text >这是弹窗</text>
		<button class="btn" bindtap="onClose">关闭弹窗</button>
	</view>

我们写个更改js来实现点击弹起对话框,并切换显示

Page({

  /**
   * 页面的初始数据
   */
  data: {
      isShow: false,//验证结果弹窗
    Position:true,//设置textarea自动弹起为true
    false:false,//设置textarea完成按钮的隐藏
    textValue:"测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据",
   
  },
  //将textarea的值赋值给textValue
  input:function(e){
    var that=this;
    that.setData({
     textValue:e.detail.value,   
    })
  },
 
//关闭验证结果弹窗
  onClose: function () {
    var that = this
    that.setData({
      isShow:false
    })
  },

//点击切换
change:function(){
    var that = this
    wx.hideKeyboard({ })  ;//隐藏输入法
     that.setData({
      isShow: true,
        })
   },

  Focus:function(e){
    console.log(e,'键盘弹起')
     },
//弹起后，取消页面滚动
  noscroll:function(){}
})

顺便提供下css好了

.containt {
  width: 647rpx;
  margin-left: 32rpx;
  height: 200rpx;
  border-radius: 16rpx;
  border: 2rpx solid rgba(51, 51, 51, 1);
  padding: 26rpx 13rpx 13rpx 26rpx;
  margin-top: 400rpx;
}

.textarea {
  width: 634rpx;
  height: 187rpx;
  font-size: 26rpx;
  font-weight: 400;
  line-height: 26rpx;
  color: #000000;
}

.btn {
  width: 686rpx;
  height: 88rpx;
  color: #333333;
  margin-left: 32rpx;
  border-radius: 8rpx;
  font-size: 34rpx;
  color: rgba(51, 51, 51, 1);
  background: rgba(255, 192, 0, 1);
  margin-top: 50rpx;
}

.popView {
  display: flex;
  height: 400rpx;
  width: 686rpx;
  background: white;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 500;
  position: fixed;
  left: 32rpx;
  top: 400rpx;
}

.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  font-size: 35rpx;
}

/* 弹窗蒙版 start */
.alert-mask {
  width: 100%;
  height: 100%;
  z-index: 100;
  background: #000;
  top: 0;
  left: 0;
  position: fixed;
  opacity: 0.5;
}

5.效果展示