都 2021 年了,微信小程序 textarea 组件还是那么多问题,兼容性问题在 Android 机型(特别是低配置的)上尤为突出...
假设组件如下:
这里就有好多问题...
1. show-confirm-bar 的问题
测试同学发现在红米 4X 上,textarea
组件的“完成”一栏不透明度不是 100%,导致文案与底下文案重叠。然后就想着设成 show-confirm-bar="{{false}}"
来隐藏“完成”栏。
好家伙,新 Bug 又来了。当设置之后,在 Android 上首次聚焦输入框时,会失焦(自动收起键盘)。然后我是这样解决这个 Bug 的:
该 Bug 属于外部原因,小程序组件本身的问题无法解决,所以不作处理。(又解决了一个问题,开心 )
社区相关问题:
- textarea:show-confirm-bar="false" 失去焦点?
- textarea 组件使用 show-confirm-bar="{{false}}" 时首次聚焦会失焦?
2. auto-height 的问题
属性 auto-height="{{true}}"
愿意是想根据内容自适应高度,以提高用户体验。可现实是,用户体验没提高,倒是提高了开发者的开发难度。TMD 又是 Android 机型的问题,在用户失焦之后,textarea
会多了一大部分的空白部分,用户体验倒是没提高,反而出现 Bug 了,擦。
解决方案:去掉
auto-height
属性,使用 CSS 控制min-height
属性。
社区相关问题:
- textarea 设置 auto-height 超出一屏后显示异常?
3. disable-default-padding 的问题
假设我们的设计稿是这样的,多行输入框与其他元素左边对齐,但由于 iOS 上会有个默认的内边距,即使 CSS 设置了 padding-left 等属性也没效果。可以添加一个 disable-default-padding="{{true}}"
属性解决。
3. textarea 原生组件的问题
由于原生组件的特(niao)性,在未支持原生组件同层渲染之前,类似 textarea 等原生组件层级是最高的,无论其他标签设置的 z-index 有多大,均无法覆盖原生组件,唯一解决的方法是使用 cover-view、cover-image 等组件包裹原生组件,但是本身 cover-view 等就一身毛病,它 TM 烦了,毫无开发体验。
关于原生组件,可看文档 native-component。
结合以上问题,于是改成这样子:
The end.