Ionic 3 ion-textarea 换行问题

Posted 2023-05-07

【中文标题】Ionic 3 ion-textarea 换行问题

【英文标题】：Ionic 3 ion-textarea line break issue

【发布时间】：2018-03-02 13:32:06

【问题描述】：

我正在使用 ionic 3，我发现当我使用 ion-textarea 时，其中有断线，然后提交，它不会自动保留断线。

我的代码：

<ion-textarea #replyinput [(ngModel)]="commentData.comment" maxlength="200" name="comment" style="min-height:100px;" type="text" formControlName="comment" placeholder=" 'Comment.replyPlaceholder' | translate "></ion-textarea>

我有输入：

你好

大家

它显示： 大家好

有人知道怎么解决吗？非常感谢

【问题讨论】：

您找到解决方案了吗？我遇到了完全相同的问题。

嗨@Wallaaa 仍然没有。

【参考方案1】：

我花了几个小时来完成这个大声笑。

问题在于post uri（参数）不会给您的API带来换行符，因此我们应该在发布之前将URI编码为html特殊字符。

在这里阅读：https://www.w3schools.com/jsref/jsref_encodeuri.asp

这是我在 html 文件上的文本区域：

<ion-textarea no-margin rows="2" [(ngModel)]="userPost.text"></ion-textarea>

这是我的.ts 文件：

var text = encodeURI(this.userPost.text);

对于输出，只需像普通字符串一样使用。

注意事项：根据此答案添加 white-space:pre-warp css： https://***.com/a/30593806/5769517

<p style="white-space: pre-wrap;">text</p>

会得到这个结果：

文本区域 将尝试这是第 1 行 这是第 2 行 这是第 3 行

处理/编码结果 will%20try%20this%20line%201%0Athis%20is%20line%202%0Athis%20is%20line%203

输出 将尝试这是第 1 行 这是第 2 行 这是第 3 行

【参考方案2】：

你应该使用所见即所得的html编辑器你可以找到一个例子here