解决textarea的placeholder层级穿透的问题
发布于 5 年前 作者 gwei 723 次浏览 来自 分享

先说下遇到的问题:之前做过的一个项目改版碰到的病例上传页面发布按钮上一版本是在底部放置的,这一版改为了顶部固定。由于上传页面顶部有两个textarea输入框所以问题就产出了。之前使用的button和view标签布的局页面上滑的时候会被textarea的placeholder穿透。不知道官方什么时候可以解决textarea这个问题。

具体问题如下图:

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

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



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


暂就发现这两种有效的解决方案,如果还有其他的。欢迎留言。


1 回复

你这个方式只是解决了具体问题。并没有从根本上解决啊。

回到顶部