最近做的一个小程序需求，其中一个页面使用到了 textarea这个小程序组件，然后点击页面上的某个元素，会触发页面弹起一个弹窗，这时发现 textarea的 placeholder文字或者输入的文字内容，会直接穿透遮罩层和浮动弹窗，显示在最上面，开始时我以为是遮罩层和浮动弹窗的层级舍得小了，于是改大，谁知道没用，改到了 99999也没用，于是我意识到这应该不是我代码的问题，网上一搜，果然有故事。
解决方案隐藏 textarea
这是最简单的解决手段，一般弹窗的时候，都会带个遮罩层，把遮罩层下面的内容隐藏一部分，用户基本上不会注意的，然后再去掉弹窗和遮罩层的时候再把 textarea显示出来。 这种方法简单有效，大部分情况下都可以这么解决。
textarea> 复制代码使用替代元素
有时候， textarea穿透的不是遮罩层，或者遮罩层以一种半透明而非完全遮住页面内容的形式呈现，担心用户能够看到因为 textarea的消失而导致页面跳动，产生不好的用户体验，那么就可以使用替代元素来替代 textarea而非将之直接隐藏掉。
基本的 textarea组件只接受文本的输入，抛开可输入性的话，外观上看就是一个含有文本节点的简单元素，只需要获取当前状态下的 textarea中输入的文字，将之赋予给一个样式与 textarea相同的普通元素，就达到了临时替代的效果。
rich-text> view> 复制代码
如上所示由于需要实时获取 textarea中已经输入的内容，所以给 text
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
