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

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

这是第一条我输出的结果我在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>

5 回复

shenming1 楼6 年前

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

lyu2 楼6 年前

CSS控制一下：

white-space: normal;

word-break: break-all;

kongguiying3 楼6 年前

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

lixue4 楼6 年前

代码片段

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

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

可以在控制台中看到我往内容中成功添加了换行符号

以及控制台输出的样式

实际展示的样式为

zenggang5 楼6 年前

别沉啊 …

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