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

问题现象

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

分析

看小程序官方文档发现textarea是原生组件,原生组件的覆盖就会想到cover-view,但是查看文档发现cover-view只支持嵌套一下几个,如图:
微信小程序textarea文本穿透弹窗解决
猜测它也许是个微信小程序的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。

总结

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