微信小程序fixed定位元素中的textarea聚焦时被键盘遮挡
场景描述
用户点击某选项,弹出一个表单弹窗,弹窗中有使用textarea组件,当用户点击输出框输入时,键盘遮挡到textarea组件原本的文字,textarea组件悬浮到键盘上方并遮挡其他内容
BUG复现
这是一个代码片段
预期输入时效果
BUG表现
解决方案
1 修改弹窗定位方式
将弹窗的fixed定位改为absolute定位,可解决此问题
局限性:absolute定位方式必须依赖上级的relative定位元素,可能导致布局问题;
2 修改文档流布局
当page中文档流已滚动到页底,或page文档流高度不超过page时,不会出现此问题;
所以可以通过使用scroll-view将文档流内容包裹起来,让page的内容不超出page,就不会出现这个问题
局限性:使用scroll-view组件,就无法触发page的onReachBottom事件,要改为监听scroll-view的滚动事件实现上拉加载
或者在弹窗弹出时,手动将page滚动到底部,也可解决
局限性:滚动页面体验不佳
3 属性fixed=true
查阅文档发现,textarea组件有一个属性fixed
附上文档链接
原来只要设置这个属性就可以了;问题解决;perfect
总结
textarea是原生组件,有颇多局限性,使用原生组件时有很多限制,而且有很多诸如此类的bug,要多多注意;使用组件时多看文档,毕竟小程序的组件与html的标签差距颇大