小程序textarea层级太高,盖住页面其他元素。

网上关于这个bug的解决方案很多,大多都是控制textarea的隐藏、显示,或者使用cover-view和 cover-image覆盖textarea组件。第一种方法不适用我的情况,第二种方法我没看太懂。所以我自己想了一个办法,简单又巧妙地解决了我的问题。我记录的方法仅作用于我自己当前的情况,大家还是根据自己的情况选择适合自己的解决方法。

问题描述:我有个表单,表单仅有textarea和upload组件(如下图),在我上传图片、点击上传后的图片,会弹出弹窗让我查看该图片。虽然弹窗有关闭按钮,但是按照一般的逻辑,点击半透明阴影遮罩层的时候也可以关闭弹窗。

 但是现在有个问题:阴影遮罩层下面的textarea层级太高,当我手指点击到图片上方的阴影区域时,会使textarea聚焦,从而导致键盘显示出来,如下图:

解决方法:

show_pic 控制弹窗是否显示,给textarea添加disabeld属性,当弹窗显示时就禁用textarea,弹窗消失时启用texarea。这样就算textarea的层级很高,我点击阴影遮罩层的时候会点击到textarea,但是都不会触发键盘。

<textarea placeholder="个人小结或记录信息"  disabled="{{show_pic}}" />

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值