背景
小程序的退款页面中有一个退款原因选项,点击后需要弹出一个弹窗,里面有一个textarea组件,在开发这工具中和ios手机中表现均正常,只有在android上,点击textarea后弹出键盘会将placeholder中的内容顶出文本框范围,输入内容收起键盘后输入的内容在文本框靠下的位置,ui错乱
解决办法
在经过多番调试后可以确定是因为popup的最外层节点设置成了fixed导致的,从现象可以看出,弹出输入键盘后下面的显示区域变小,placeholder会跟着页面向上稍微滚动一些,键盘收起后下面的显示空间又被让了出来,所以输入内容又会“掉”下去,如果将父元素设置成relative则不会有这个问题,但是这是个弹出,父元素必须设置成fixed,查看小程序文档后发现textarea有个fixed的属性,就是用于上述情况,可完美解决该问题
moreInfo
网上说的将父组件不能设置高度和overflow,这些我经过测试后发现并没用