小程序textarea组件层级过高导致文字穿透浮层如何解决

发布时间:2022-03-11 10:38:08 作者:iii
来源:亿速云 阅读:737

这篇文章主要介绍“小程序textarea组件层级过高导致文字穿透浮层如何解决”,在日常操作中,相信很多人在小程序textarea组件层级过高导致文字穿透浮层如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序textarea组件层级过高导致文字穿透浮层如何解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

有的微信小程序开发者在做小程序时,使用到了 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的内容包含了换行文本,则需要对换行符进行处理:

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;
}

到此,关于“小程序textarea组件层级过高导致文字穿透浮层如何解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. jquery弹窗、浮层插件
  2. 如何解决微信小程序中textarea层级过高的问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序 textarea

上一篇:微信小程序如何使用wxs计算获取到的数据

下一篇:怎么用小程序api获取用户的地理位置

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》