有的微信小程序开发者在做小程序时，，，
，，，使用到了 textarea这个小程序组件，，，
，，，然后点击页面上的某个元素，，，
，，，会触发页面弹起一个弹窗，，，
，，，这时发明 textarea的 placeholder文字或者输入的文字内容，，，
，，，会直接穿透遮罩层和浮转动窗，，，
，，，显示在最上面。。。。。。

那么这种情形要怎么解决？？？？？？

小程序 textarea组件层级过高导致文字穿透浮层的解决要领 ：

• 隐藏 textarea

这是最简朴的解决手段，，，
，，，一般弹窗的时间，，，
，，，都会带个遮罩层，，，
，，，把遮罩层下面的内容隐藏一部分，，，
，，，用户基本上不会注重的，，，
，，，然后再去掉弹窗和遮罩层的时间再把 textarea显示出来。。。。。。 这种要领简朴有用，，，
，，，大部分情形下都可以这么解决。。。。。。

<textarea wx:if="{{ showMask }}">textarea>

复制代码

• 使用替换元素

有时间，，，
，，， textarea穿透的不是遮罩层，，，
，，，或者遮罩层以一种半透明而非完全遮住页面内容的形式泛起，，，
，，，担心用户能够看到由于 textarea的消逝而导致页面跳动，，，
，，，爆发欠好的用户体验，，，
，，，那么就可以使用替换元向来替换 textarea而非将之直接隐藏掉。。。。。。

基本的 textarea组件只接受文本的输入，，，
，，，抛开可输入性的话，，，
，，，外观上看就是一个含有文本节点的简朴元素，，，
，，，只需要获取目今状态下的 textarea中输入的文字，，，
，，，将之赋予给一个样式与 textarea相同的通俗元素，，，
，，，就抵达了暂时替换的效果。。。。。。

<textarea id="text-area" value="{{txtRealContent}}" bindinput='txtInput' wx:if="{{!showMask}}" />

<view class='rich-text' style="{{('height:' + txtHeight + 'px')}}" wx:else>
  <rich-text nodes="{{txtRealContent}}">rich-text>
view>
复制代码

如上所示

• 由于需要实时获取 textarea中已经输入的内容，，，
  ，，，以是给 textarea元素加了个 bindinput的监听器
• showMask用于标识是否显示遮罩层(或者其他可能会被 textarea穿透的浮动元素)，，，
  ，，，若是显示遮罩层，，，
  ，，，则隐藏 textarea元素，，，
  ，，，并显示替换原宿
• 这里 textarea的隐藏使用了 wx:if，，，
  ，，，会使其彻底地从页面中消逝，，，
  ，，，而重新显示出来的时间，，，
  ，，，textarea元素会重新建设，，，
  ，，，丧失原先输入，，，
  ，，，以是给其加了个 value属性，，，
  ，，，其值 txtRealContent就是缓存的 textarea已经输入的文本内容；；若是你不必这种要领，，，
  ，，，不让 textarea完全显示，，，
  ，，，而仅仅是隐藏，，，
  ，，，例如使用 hidden="{{ showMask ? true :false }}"，，，
  ，，，由于不涉及到 textarea的删除与重修，，，
  ，，，以是就无需添加 value属性来控制文本内容了。。。。。。
• textarea是可以输入可换行的文本内容的，，，
  ，，，以是这里使用了 rich-text组件，，，
  ，，，在使用的时间，，，
  ，，，我发明 rich-text似乎不支持溢出隐藏，，，
  ，，，以是又特殊在其外面包了一层 view组件，，，
  ，，，并将其高度设置为和 textarea相同

上面四个方法，，，
，，，都较量简朴，，，
，，，稍微需要注重的是，，，
，，，若是 textarea的内容包括了换行文本，，，
，，，则需要对调行符举行处理：

textareaContent.replace(/\n/g, '
')
复制代码

若是你想让 textarea自动增添高度而不是牢靠高度，，，
，，，给 textarea加了个 auto-height，，，
，，，那么就需要“实时”获取其高度 说是 “实时”，，，
，，，着实也并不是那么实时，，，
，，，不思量其他样式的转变，，，
，，， 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;
}

【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，
，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，
，，，若有知识产权人并不肯意我们使用，，，
，，，若是有侵权请连忙联系。。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，
，，，仅系客观性形貌，，，
，，，如您需要相识该类商品/服务详细的资讯，，，
，，，请您直接与该类商品/服务的提供者联系。。。。。。