textarea添加支持输入换行功能
概要
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);