收藏
回答

textarea在modal中显示不全

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug textarea 客户端 6.7.2 2.2.5

- 当前 Bug 的表现(可附上截图)


textarea 在真机上的问题比较多,除了常见的 z-index 层级贼高外,还有如下问题。我们有一个列表页和详情页,有从列表页进入详情操作,还有从列表页进入详情页同时弹出评论输入框。再此遇到问题如下


    1. 没有设置 cursor-spacing 时,在真机上表现如下


小米note3显示如下



(textarea有设置高度的,此处显示不全,且还有个按钮完全被遮盖住了)


红米2A (android 低端机,微信版本是最新的,Android系统是4.4.4) 显示如下


(textarea完全被遮盖住了)


当输入内容足够多或者按键盘回车时,才能把textarea显示全


小米note3如下



红米2A 显示如下



2. 当我在代码中设置了 cursor-spacing 时,显示正常,textarea 能完全显示,但是,输入内容过多换行时或者敲回车时 textarea 会往上顶,不过多出了一块空白的区域




- 预期表现


不管textarea有没有输入内容,textarea 都能显示全,且输入内容或者换行时,textarea不会随内容往上移


- 复现路径


- 提供一个最简复现 Demo


代码片段:   wechatide://minicode/icer4kmm7U2b

最后一次编辑于  2018-09-10  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

4 个回答

  • 娇华
    娇华
    2018-09-11

    你好,这里的空白是因为你设置了 cursor-spacing的值,


    2018-09-11
    赞同
    回复 7
    • 生命過客
      生命過客
      2018-09-11

      知道是设置了cursor-spacing,然后换行时导致有空白,但怎么解决这个这个问题呢?


      不设置cursor-spacing,textarea显示不全,甚至不显示,用户输入了什么一无所知。

      2018-09-11
      回复
    • 生命過客
      生命過客
      2018-09-11回复生命過客

      我又尝试了在 data 里声明一个值用来控制 cursor-spacing  ,使用 bindlinechange  事件去根据 lineCount 去动态设置 cursor-spacing 去解决这个问题,发现在 bindlinechange 里面 setData textarea 的cursor-spacing 没有用,下一次 bindlinechange 触发时才生效

      2018-09-11
      回复
    • 生命過客
      生命過客
      2018-09-29

      补充说明下,这问题要在真机上才能复现,开发工具输入框获得焦点不会弹出键盘的。

      2018-09-29
      回复
    • 娇华
      娇华
      2018-09-29回复生命過客

      空白问题是设置了cursor-spacing,
      https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html

      2018-09-29
      回复
    • 生命過客
      生命過客
      2018-09-29回复娇华

      不设置cursor-spacing,那textarea显示不全,只显示一丢丢,如何解决?



      2018-09-29
      回复
    查看更多(2)
  • 心与天游
    心与天游
    2018-09-13

    同样的问题,默默观望~

    2018-09-13
    赞同
    回复
  • 生命過客
    生命過客
    2018-09-28

    快20天了,每天都来看一遍,没有解决思路,明天再来。

    2018-09-28
    赞同
    回复
  • 丿心有猛虎丶
    丿心有猛虎丶
    2018-12-17

    我也被这个问题折磨很久了,想了n多办法,都不好使

    2018-12-17
    赞同
    回复