评论

解决textarea的placeholder层级穿透的问题

解决textarea的placeholder层级穿透的问题

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

具体问题如下图:

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

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

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



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里面,这样基本看不出内部组件类型的变化)

感谢大佬提供的第三种方案,感觉很不错。

如果还有其他的。欢迎留言。


最后一次编辑于  2020-09-07  
点赞 4
收藏
评论

11 个评论

  • Jack Lin
    Jack Lin
    2020-04-18

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

    2020-04-18
    赞同
    回复 29
    • 默
      2020-04-20
      是的呢  要不您发一个从根本上上解决的方案?
      2020-04-20
      回复
    • TNT
      TNT
      2020-04-29
      快了快了。安卓马上支持textarea同层渲染了~ios都支持了
      2020-04-29
      回复
    • 蛤ོ蛤ོ
      蛤ོ蛤ོ
      2020-05-11回复TNT
      啥时候出哇?
      2020-05-11
      回复
    • TNT
      TNT
      2020-05-11回复蛤ོ蛤ོ
      应该在灰度了吧。我去问问。
      2020-05-11
      回复
    • 晒太阳的熊
      晒太阳的熊
      2020-06-02回复TNT
      老铁咋样了?我今天发现应该还是有这个问题
      2020-06-02
      回复
    查看更多(24)

正在加载...

登录 后发表内容