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

textarea 内容换行问题 如何防止用户一直连续输入不回车所造成的排版问题?

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug textarea 微信iOS客户端 Android 6.6.6 2.0.1



如何防止用户一直连续输入 不回车所造成的内容排版问题?



这是第一条我输出的结果 我在bindinput 函数里给文本内容加上了\n 在textarea 中并不会换行,

在text 标签中显示也不会换行??

textAreaInput: function (e) {
  var v = e.detail.value.split('');
  var n = v;
  var c = 0;
  const p = 20;
  console.log(v);
  for(var i=0;i<v.length;i++){< code=""></v.length;i++){<>
    console.log(i%p===0);
    if(i&&i%p===0&&v[i]!='\n'){
      c++;
      n.splice(i+c,0,'\n')
    }
  }
  console.log(n);
  console.log(n.length > v.length);
  console.log(n.join(''));
  if (n.length > v.length)
    this.setData({ content: n.join('') });
}
<textarea name="content"  class='content padding-10' style='height:{{contentHeight}}px' placeholder='请开始你的表演' maxlength="-1" auto-focus="true" bindinput='textAreaInput' value="{{content}}">
   textarea>
<view class="card" wx:for="{{list}}">
 <text>{{item.Content}}text>
view>


wechatide://minicode/mhVxNJmd6uYx
最后一次编辑于  2018-04-17
回答关注问题邀请回答
收藏

5 个回答

  • 连胜
    连胜
    2018-06-08

    CSS控制一下：

    white-space: normal;

    word-break: break-all;

    2018-06-08
    有用
    回复
  • u1v
    u1v
    2018-04-17


    代码片段

    如果用户一直在textarea控件中输入并不回车 则无法自动换行

    我搜索了论坛 有管理建议是自行加入\n产生换行 但是在并不会在textarea控件以及text中产生换行效果

    可以在控制台中看到我往内容中成功添加了换行符号
    以及控制台输出的样式
    实际展示的样式为

    2018-04-17
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-04-17

    你好，请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

    2018-04-17
    有用
    回复
  • 呃
    呃
    2018-04-17

    这里帖子是按发布时间排序的，你再怎么顶，他也得沉下去

    2018-04-17
    有用
    回复
  • u1v
    u1v
    2018-04-17

    别沉啊 ....

    2018-04-17
    有用
    回复
请 登录 后发表内容
相关文档