首页 > 前端技术 > 小程序textarea的placeholder层级穿透的
2021
02-05

小程序textarea的placeholder层级穿透的

解决方法来源,通过社区各位大佬的回复最终得出以下结论:

1.思路: 通过原生组件去覆盖textarea元素即可

》 1.1 textarea不是原生组件吗 view和button干不过 那我们也找原生组件不就好了吗。所以我就看了下能使用的也就剩cover-view标签了。所以第一种解决方法就是使用原生组件去替换之前的view和button组件。

》1.2 使用元素替代,加一个和textarea同级的元素,用来显示textarea输入的值,当textarea失去焦点的时候,展示出来即可

2.思路:通过滑动页面去判断textarea元素的显示和隐藏

使用onPageScroll函数来获取页面的滚动距离 当滚动距离等于textarea元素的top减去固定到顶部的盒子的距离的时候就让textarea元素隐藏或者把textarea的placeholder设置为空也是可以解决穿透问题的。

补充:

3.思路:只用view、input、text等字段去替换textarea元素,来避免textarea的pplaceholder穿透问题

如果有弹窗或者组件被穿透了,可是做一个判断,当弹窗出现的时候设置一个hide字段,并根据字段判断textarea的显示隐藏,并且当textarea隐藏后,用一个样式相同input,或者view组件代替显示原来的textarea,当弹窗消失后,再将textarea显示,将view或者input隐藏掉(注意,给textarea设置一个bindinput的方式将输入的文字显示在view或者input里面,这样基本看不出内部组件类型的变化)

 

最后编辑:
作者:管理员
这个作者貌似有点懒,什么都没有留下。