解决小程序文本区组件级别高导致文本穿透浮动层的问题.

最近做了一个小程序请求，其中一个页面使用了小程序组件textarea，然后点击页面上的一个元素，就会触发页面弹出一个弹出窗口。这时，我发现占位符文本或textarea的输入文本内容会直接穿透蒙版图层和浮动弹出窗口，显示在顶部。一开始觉得蒙版层和浮动弹出窗口的层次太小，就改了，但是谁知道没用，改到了9999。

解决方案

隐藏文本区域这是最简单的解决方案。一般在弹出窗口的时候，会带一个蒙版图层来隐藏蒙版图层下的一部分内容，这样用户基本不会注意到，然后在去掉弹出窗口和蒙版图层的时候显示textarea。这种方法简单有效，大多数情况下都能解决。

textarewx 3360 if=“{ show mask } }”Textarea复制代码使用替代元素。有时，文本区域没有穿透蒙版层，或者蒙版层以半透明的方式呈现，而不是完全覆盖页面内容。担心用户会因为textarea的消失而看到页面跳转，造成不好的用户体验，可以使用替代元素，而不是直接隐藏textarea。

基本的textarea组件只接受文本输入。除了输入，它看起来像是一个带有文本节点的简单元素。它只需要获取当前状态下textarea中的文本输入，并赋予一个与textarea样式相同的普通元素，从而达到临时替换的效果。

text area id=' text-area ' value=' { { TxTrealContent } } ' bind input=' TxTinput ' wx : if=' { {！show mask } } '/view class=' rich-text ' style=' { { {(' height : ' TXT height ' px ')} } ' Wx 3360 Elserich-text节点=' { { txtrealcontent } } ' rich-text view的复制代码如上所示。

因为需要实时获取textarea中的输入内容，所以在textarea元素中添加了bindinput listener showMask来标识是否显示蒙版图层(或者其他可能被textarea穿透的浮动元素)。如果显示了遮罩层，textarea元素将被隐藏。显示文本区的隐藏，而不是原宿。wx:if将使其从页面上完全消失。当它再次显示时，textarea元素将被重新创建并丢失原始输入，因此会向它添加一个value属性，其值txtRealContent是已在缓存的textarea中输入的文本内容。如果不使用此方法，不要让textarea完全显示，而只是隐藏它，例如，使用hidden='{{ showMask？True :false }} '，因为不涉及textarea的删除和重构，所以不需要添加value属性来控制文本内容。Textarea可以输入可以用新行包装的文本内容，所以这里使用了富文本组件。使用时发现富文本似乎不支持溢出隐藏，所以额外包裹了一层视图组件，其高度设置为与textarea相同。以上四个步骤比较简单。需要注意的是，如果textarea的内容包含新行，则需要处理换行符：

textarecontent . replace(/\ n/g ' ')复制代码如果你想让textarea自动增加高度而不是固定高度，并给textarea添加一个自动高度，那么你需要“实时”获取它的高度，这并不是那么实时，不考虑其他样式的变化。textarea的高度与行数有关，每次增加或减少一行，其高度都会发生变化，因此只需监控其内容中行数的变化即可。正如textarea组件提供了这个监视器：bindlinechange。

原理说完了，完整实例代码如下：

index.wxml

<view class="page-body">  <button bindtap="changeMaskVisible">切换maskbutton>  <view class="textarea-wrp">    <textarea id="text-area" value="{{txtContent}}" bindinput='txtInput' bindlinechange="textAreaLineChange" wx:if="{{!showMask}}" auto-height />    <view class='rich-text' style="{{('height:' + txtHeight + 'px')}}" wx:else>      <rich-text nodes="{{txtRealContent}}">rich-text>    view>  view>  <button>Footerbutton>  <view wx:if="{{showMask}}" bindtap="changeMaskVisible" class="mask">    <view class="mask-content">view>      view>view>复制代码

index.js

Page({  data: {    txtRealContent: '',    txtContent: '',    showMask: false,    txtHeight: 0  },  textAreaLineChange(e) {    this.setData({ txtHeight: e.detail.height })  },  txtInput(e) {    this.setData({ txtContent: e.detail.value })  },  changeMaskVisible(e) {    if (!this.data.showMask) {      // 将换行符转换为wxml可识别的换行元素       const txtRealContent = this.data.txtContent.replace(/\n/g, '')      this.setData({ txtRealContent })    }    this.setData({ showMask: !this.data.showMask })  }})复制代码

index.wxss

.rich-text {  overflow: hidden;}.mask {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  background-color: rgba(0, 0, 0, .6);  z-index: 10;}.mask-content {  position: fixed;  top: 44%;  left: 50%;  height: 60%;  width: 60%;  transform: translate(-50%, -50%);  background-color: yellowgreen;  z-index: 12;}