微信小程序textarea文本穿透弹窗解决

问题现象

在小程序项目开发中，页面是个表单内容，其中包含有textarea组件。同时页面有弹出框出现textarea文本穿透到弹窗的问题。在ios中不会出现这种问题，而在安卓机会出现。按原本开发想法是textarea组件层级高于弹窗，于是使用z-index进行层级调节。但是发现并没有预料中的解决问题。

分析

看小程序官方文档发现textarea是原生组件，原生组件的覆盖就会想到cover-view，但是查看文档发现cover-view只支持嵌套一下几个，如图:

猜测它也许是个微信小程序的bug，很快就在社区找到相关问题描述了，微信社区问题链接
这是个已知bug，微信后期会进行更新调整，但显然甲方爸爸不会允许你说，“这不是我写的bug,想要恢复正常去跟腾讯说”吧？

解决方案

1. 首先cover-view中可覆盖原生组件，虽然文档中说明未写明可覆盖textarea组件，但可以尝试使用操作。把弹窗用cover-view包裹，并只在里面使用cover-view和button组件代替，同时z-index设置层级。这个方法我自己未进行实际操作，因我不想在原来项目中进行弹窗改动。
2. 既然textarea会穿透，那我们只需要在弹窗出现的时候页面不要用textarea，用view代替就不会出现穿透了。
   实际操作：用view模拟一个textarea，当点击输入时（获得焦点）把view替换成为textarea，失去焦点时获取值显示为view。这样hack的方式来避免出现这个穿透bug。

总结

开发中总要碰到浏览器环境中这样那样的问题。多思考可行性尝试趋利避害实现需求。