评论

解决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 个评论

  • 微盟
    微盟
    2021-01-12

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

    2021-01-12
    赞同 1
    回复 2
    • 默
      2021-01-12
      正解
      2021-01-12
      回复
    • 木雷双雄7
      木雷双雄7
      2022-11-09
      手机主题会覆盖textarea内文字字体,模拟的view是不会的,来回切换导致字体不一致
      2022-11-09
      回复
  • 杨杰
    杨杰
    2022-12-06

    小程序真是个毒瘤,一堆垃圾问题


    2022-12-06
    赞同 3
    回复
  • 我想下海打老虎🐯🐯🐯
    我想下海打老虎🐯🐯🐯
    2023-03-29

    2023-03-29 安卓依然遇到该问题

    2023-03-29
    赞同 1
    回复
  • 十点睡觉
    十点睡觉
    2023-03-10

    我遇到了与楼主相似的问题,最终找到了问题的原因:下面说一下具体问题的引起原因以及解决思路,由于我是用 uni-app 开发的微信小程序,我在写一个新增的页面,页面中有10个甚至更多的 input输入框 ,只要点击屏幕最下方的输入框就会有如下图片的问题:

    可以从图片中看到,我其实是点击了最下方的输入框,此时软键盘弹出后,我的输入框内容却跑到了上面,这让我百思不得其解,于是我去 uni-app 官方的小程序(小程序名称:HelloUniApp)中找到了官方的内置组件 input ,想知道是不是它们官方组件自己的问题的原因,结果发现官方既然没有问题,如图:

    此时我就感觉是我代码的问题了,最终发现了在我的表单页面的CSS代码外层的容器中发现了 overflow 属性 ,把它去掉就好了,如图:

    这样就完美解决了!!!!!!!!!

    总结:

    这里总结一下问题引起的原因,这是因为外层容器使用了 overflow: hidden;会导致页面内容过多内容就会向容器内挤压,当我们点击底部输入框时,软键盘弹出时,页面的高度实际上是增加了软键盘的高度,此时你加了overflow: hidden;导致软键盘无法增加更多的高度内容,只会向内挤压,而为了让你看到输入框的内容,就会出现了输入框内容穿透道上面的其他元素上面的效果。


    日期:2023-03-10

    2023-03-10
    赞同 1
    回复 1
    • 十点睡觉
      十点睡觉
      2023-03-10
      这里补充一下只要是 overflow 属性,不管你是 hidden 还是 auto,都会有这个问题
      2023-03-10
      回复
  • 阳光季节
    阳光季节
    2020-09-04

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

    2020-09-04
    赞同 1
    回复 4
    • 阳光季节
      阳光季节
      2020-09-04
      2020-09-04
      回复
    • 阳光季节
      阳光季节
      2020-09-04
      可以避免用到cover-view(很鸡肋)
      2020-09-04
      回复
    • 养乐多
      养乐多
      2020-09-16
      textarea输入多行后滚动了怎么办呢,如何确保view显示的内容和textarea是一样的
      2020-09-16
      回复
    • 当乙醇爱上了铜
      当乙醇爱上了铜
      2021-05-24
      2021-05-24
      回复
  • 别哭『』坏人会笑
    别哭『』坏人会笑
    2022-12-31

    多少年了 还有这个问题,尤其是u--textarea,时有时无,会导致穿透picker、弹出层,解决办法就是如果picker 的 show判断值,任何一个弹出层被穿透,则placeholder赋值为空。

    <u-textarea :placeholder="ishow||cShow||sShow||wshow?'':'请先点xxxxx'"

    <u-picker :show="sShow"

    <u-popup :show="ishow"

    <u-picker :show="cShow"

    2022-12-31
    赞同
    回复
  • .
    .
    2022-10-28

    2022-10-28没有穿透了,很难想象到昨天还有穿透问题

    2022-10-28
    赞同
    回复 2
    • .
      .
      2022-10-28
      2022-10-28早上没有穿透,下午穿透问题又出现了
      2022-10-28
      回复
    • Slam
      Slam
      2022-12-07
      这个偶现来的
      2022-12-07
      回复
  • chh
    chh
    2021-03-25

    既然是placeholder引起的层级穿透,为啥不从根源入手。首先placeholder文本的作用就是在没有textarea内容的时候做输入提示,有内容则隐藏。那使用自定义placeholder不也可以?

    1.首先设置text(自定义placeholder)定位到合适的placeholder位置(css就不展示了,基础)

    <view class="li">
      <textarea  bindinput="textareaInput"></textarea>
      <text class="textarea-placeholder" hidden="{{!isShowTextareaPlaceholder}}">placeholder内容</text>
    </view>
    
    

    2.通过监听textarea输入内容控制自定义placeholder显示和隐藏

    data: {
      isShowTextareaPlaceholder: true, // 默认显示自定义placeholder
    }
    /* 文本域输入内容监听 */
    textareaInput(res) {
      const { value } = res.detail
      this.setData({
        isShowTextareaPlaceholder: !Boolean(value)
      })
    },
    
    


    • 另外不到万不得已不建议用cover相关的原生组件来解决这个问题。
    2021-03-25
    赞同
    回复 2
    • 默
      2021-03-25
      你试试你这种 获取焦点然后上滑 看看那个焦点会不会透出来
      2021-03-25
      1
      回复
    • chh
      chh
      2021-04-12回复
      获取焦点再上滑不是失焦了?
      2021-04-12
      回复
  • Rock-小胖 [旺柴]
    Rock-小胖 [旺柴]
    2020-09-06

    我也遇到同样的问题了唉

    2020-09-06
    赞同
    回复
  • 💎奇兵网络15111275288
    💎奇兵网络15111275288
    2020-08-08

    <textarea placeholder="{{uhide!==null?'':'请输入评论内容'}}focus="{{form.focus}}name="contentvalue="{{ form.message }}" />


    2020-08-08
    赞同
    回复

正在加载...

登录 后发表内容