最近做的一个小程序需求,其中一个页面使用到了 textarea
这个小程序组件,然后点击页面上的某个元素,会触发页面弹起一个弹窗,这时发现 textarea
的 placeholder
文字或者输入的文字内容,会直接穿透遮罩层和浮动弹窗,显示在最上面,开始时我以为是遮罩层和浮动弹窗的层级舍得小了,于是改大,谁知道没用,改到了 99999
也没用,于是我意识到这应该不是我代码的问题,网上一搜,果然有故事。
解决方案
- 隐藏
textarea
这是最简单的解决手段,一般弹窗的时候,都会带个遮罩层,把遮罩层下面的内容隐藏一部分,用户基本上不会注意的,然后再去掉弹窗和遮罩层的时候再把 textarea
显示出来。
这种方法简单有效,大部分情况下都可以这么解决。
<textarea wx:if="{
{ showMask }}"></textarea>
- 使用替代元素
有时候, textarea
穿透的不是遮罩层,或者遮罩层以一种半透明而非完全遮住页面内容的形式呈现,担心用户能够看到因为 textarea
的消失而导致页面跳动,产生不好的用户体验,那么就可以使用替代元素来替代 textarea
而非将之直接隐藏掉。
基本的 textarea
组件只接受文本的输入,抛开可输入性的话,外观上看就是一个含有文本节点的简单元素,只需要获取当前状态下的 textarea
中输入的文字,将之赋予给一个样式与 textarea
相同的普通元素,就达到了临时替代的效果。
<!-- 这是真正的 textarea组件 -->
<textarea id="text-area" value="{
{txtRealContent}}" bindinput='txtInput' wx:if="{
{!showMask}}" />
<!-- 这是用于模拟 textarea的替代元素 -->
<view class='rich-text' style=