textarea添加支持输入换行功能

textarea添加支持输入换行功能

概要js部分的处理html部分的渲染处理

概要

textarea标签本身是并不支持识别换行功能的，只支持输入空格的功能，但是有的时候需要支持换行功能，这时就需要我们利用换行符\n 和br标签的转换进行处理。

js部分的处理

在textarea中输入换行时，换行符是 \n； 在HTML页面中显示换行时，使用的是 br标签； 所以我们解决这个问题的思路也很简单，就是在前端页面中，将\n转换成br标签即可。

代码如下：

//将传给后台的用户输入的字符串中的换行符\n全部转换为<br/>标签 var comment_str= $scope.comment.replace(/\n/g,'<br/>'); mainSvc.add_comment(comment_str,function(data){ console.log(data); })

效果如下：

html部分的渲染处理

经过我们之前对输入的字符串的处理，我们从后台获取到的返回数据是这样的：

然后我们只需要通过angular中的 ng-bind-html 指令或者jquery中的 .html() 方法将br标签渲染出来即可。

代码如下：

<div class="comments_content_text" ng-bind-html="comment.detail"></div> $(".comments_content_text").html(input_str);