小程序textarea层级高的问题

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

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

思考原因

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

解决办法

  1. 通过控制文本输入框显示隐藏,需要显示按钮的时候,将文本输入框,并用view样式代替文本框。
  1. 运用<cover-view> 覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image,可在cover-view中使用button。
// 给button用cover-view标签包裹
<cover-view class='footer' style="z-index: 10000;">
    <button bindtap='submit' class="btn-common btn-large {{isSubmit?'btn-disable':'btn-primary'}}" style="background-color: #FFA00B; box-shadow:#f90 0px 8px 20px 0px" disabled="{{isSubmit}}" loading="{{isSubmit}}" hover-class="{{isSubmit ? '' : 'scrm-button-hover-primary'}}" wx:if="{{info.status == 1}}">{{isSubmit?'核销中...':'确认核销'}}</button>   
</cover-view>

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

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


textarea_最终效果.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以上一篇文章为基础,沿着逻辑层次往下走,我们来继续讨论关于学习效率的问题。上篇文章我们说到,很多人求贤若渴,也费时...
    不是不就是阅读 3,994评论 0 1
  • 本周温馨时刻及点滴成果 一、健康 4.21发现儿子拉肚子了!用马齿苋压片糖果有效的。 4.22到锦绣嘉苑里面的美丽...
    锦华cara阅读 1,137评论 0 0
  • 4月26日,星期三。早晨5:40,天气晴。我又来广场健身啦! 漫步在春光里,心旷神怡。忽想起宋朝范仲淹所《岳阳楼记...
    摩西奶奶的粉丝阅读 3,199评论 0 3