公告列表
公告列表
收藏
回答

固定层被textarea里的文字穿透

框架类型 问题类型 终端类型 操作系统 微信版本 基础库版本
小程序 Bug 客户端 iOS 6.6.7 2.1.3

想做个顶部固定按钮。

下方是个textarea。固定view可以盖住textarea，但当输入文字时，文字却穿透了固定view的背景色与文字。

求助。

.bar {
    height: 80rpx;
    width: 100%;
    position: fixed;
    top: 0px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #F7F7F7;
    z-index: 99999999;
}


回答关注问题邀请回答
收藏

5 个回答

  • 郭成成 Richie
    郭成成 Richie
    2020-10-21

    最佳解决方案——以暴制暴：在你固定的view下放一个同样大小textarea元素，并设置为disable。

    举个例子：

    index.wxml

    <textarea placeholder="这是输入框，请输入你的文本。"></textarea>
<textarea class="float-view" disable></textarea>
<view class="float-view">这是你固定的view组件，当前view下有个一样大小的textarea。</view>


    index.wxss

    .float-view{
  position: fixed;
  top:0;  
  left:0;  
  width:100%;
  height:100rpx;
  background:#f1f1f1;
  z-index:9;
 }
    2020-10-21
    有用 2
    回复
  • Excel
    Excel
    2021-09-24
    慌啥呀，我们是这么做的，造假！！！使用input框，然后样式写成 textarea 类似


    2021-09-24
    有用
    回复
  • 浩然
    浩然
    2018-07-13

    谢谢。也终于明白了。天下本无事，无端来了个头儿，就多事了。没办法只能折中取消了导航了。

    2018-07-13
    有用
    回复
  • kevin
    kevin
    2018-07-13

    tip: textarea 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。


    2018-07-13
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-07-13

    textarea: 天上天下 唯我独尊

    cover-view: 屁！

    2018-07-13
    有用
    回复 5
    • 小孟丶666
      小孟丶666
      2018-11-01

      你的意思是用cover-view去代替被穿透的view？

      2018-11-01
      赞
      回复
    • 卢霄霄
      卢霄霄
      2018-11-01回复小孟丶666

      不不不。。。解决方法还是只有用view去动态替换textarea

      2018-11-01
      赞
      回复
    • 牛
      牛
      2018-12-13回复卢霄霄

      cover-view:没啥用啊，能嵌套的组件太少了

      2018-12-13
      赞
      回复
    • 卢霄霄
      卢霄霄
      2018-12-13回复牛

      确实，不过官方正在努力做同层渲染，据说已有重大突破 可能快了

      2018-12-13
      赞
      回复
    • 举高高
      举高高
      2022-10-18回复卢霄霄
      2022年还有问题
      2022-10-18
      赞
      回复
请 登录 后发表内容
相关文档