微信小程序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原生组件带来的层级尴尬