小程序textarea层级高的问题

小程序开发项目中常使用到input、textarea等原生组件,实际情况如图所示,按钮定位在textarea框上的时候,文本框在开发者工具上显示正常,在真机查看的时候,其实是显示在按钮之上的,点击按钮的时候,其实会触发文本框从而获取焦点,试键盘弹起,导致按钮事件无效。这就是所说的原生组件层级高的问题

textarea_正常表现.png
textarea_异常.png

思考原因

这是为什么呢? 官方文档有说明,因为textare、input这些是原生组件。原生组件的层级是最高的,不管其它非原生组件z-index设置多大,原生组件都无法覆盖在原生组件上。

解决办法

  1. 通过控制文本输入框显示隐藏,需要显示按钮的时候,将文本输入框,并用view样式代替文本框。
  1. 运用 覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image,可在cover-view中使用button。
// 给button用cover-view标签包裹

       

小程序文档 cover-view 小程序也有说明:只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。给按钮设置的阴影效果其实是不起作用的

最终手机上实现效果如下:


textarea_最终效果.png

你可能感兴趣的:(小程序textarea层级高的问题)