微信小程序textarea问题总结
微信小程序textarea问题总结
1.textarea多行输入框。该组件是原生组件
2.参考文档中的原生组件说明https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
-
原生组件的层级是最高的,所以页面中的其他组件无论设置
z-index
为多少,都无法盖在原生组件上。- 后插入的原生组件可以覆盖之前的原生组件。
- 原生组件还无法在
scroll-view
、swiper
、picker-view
、movable-view
中使用。 -
部分CSS样式无法应用于原生组件,例如:
- 无法对原生组件设置 CSS 动画
- 无法定义原生组件为
position: fixed
- 不能在父级节点使用
overflow: hidden
来裁剪原生组件的显示区域
3.由于textarea是原生组件,所以当页面上有遮罩层或者弹出层时,textarea中的内容也会显示在最上面,即使遮罩层或者弹出层的z-index设置的很大,更恶心的是此时点击textarea依然会获得焦点。
提供的解决方案:
(1)用view标签画出一个textarea的样子,并给上点击事件
(2)点击出现浮层,将真正的textarea置于modal中,输入内容,同时将textarea的value赋值与第一步的view中
虽然中间多了一步,但可以避免textarea原生组件带来的层级尴尬