Textarea换行输出到前端无效果的推荐处理方法

原创 2016年01月17日 11:51:26

在处理一些长文本的时候(仅是较长的纯字符串,还不用大动干戈使用富文本编辑器)经常会用到Textarea标签作为输入控件。

<textarea name='desc'></textarea>

Textarea作为一个输入控件有许多优点:

  • 通过CSS可以方便地调节输入框的长宽
  • 输入过长文本的时候会自动换行显示
  • 前端设置resizing属性还可以让用户自主调节输入框
  • 最好用的就是可以输入多行文本,这对于一些只需要简单段落排版的文字内容来说简直太棒了

BUT!当信心满满在排好段落保存刷新页面后。。。
我发现换行不!见!了!只有一大串乱糟糟的文本
但是刷新后台设置页发现,Textarea中的文本还是规规矩矩的有换行的。。。。。。

最后
通过查找资料了解到,这是由于在Textarea控件中,换行符是‘\n’(Mac系统中是\n\r),而前端页面页面是无法直接显示这个换行的,只能显示<br/>的换行。
资料中有许多大神提出,在做入库前对Textarea的内容进行处理,替换对应的换行符,像下边这样:

    desc= odesc.value.replace(/\n|\r\n/g,"<br/>"); 

这样存储后输出到前端是没有问题的,但是又会出现另外一个问题,就是重新设置内容读取到Textarea控件需要再次把换行替换回去,以避免在输入框中HTML标签乱入

    $desc = str_replace("<br/>",'\n',$desc); 

考虑到对服务器资源的节约(扣门)
最终在项目前端中用了这种方法:

<script>
$(function(){
    $("p.re-br").each(function() {
        var temp =  $(this).text().replace(/\n|\r\n/g,'<br/>');
        $(this).html(temp);
    });
});
</script>

纯前端的解决办法,服务器那么累就交给客户端去解决吧,嘿嘿
(PS请参考使用率择优选择:))

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

处理textarea的空格和换行

刚发了一篇博客,然后发现csdn在发布用户的文章时好像没有处理输入的换行和空格,之前没有很在意,因为这次我辛苦缩进的代码居然显示一团糟,有点接受不了,鉴于最近做的需求遇到了这个问题,所以说一下这个问题...

textarea文字换行保存到数据后读出来没有换行 解决方案

textarea文字换行保存到数据后读出来没有换行 解决方案

常见textarea换行问题的处理方法

textarea换行时主要遇到的有以下两个问题 1、在textarea中输入回车符 在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库...
  • jkpi888
  • jkpi888
  • 2013年11月24日 10:15
  • 3157

HTML里面Textarea换行总结

最近碰到一个数据转来转去转到Textrea里面是否能真正按行存放的问题,在这里总结一下: 问题描述:比如get数据到一个TextArea里面,如“AAA BBB”,想把这段文字在TextArea里面真...

JS控制在textarea中换行

好久没记东西了,今天遇到个小问题折腾了好一会,记录一下。 如何在前台JS代码中控制文字内容在Textarea中换行: var result = ""; for ( var in...

textarea对象换行问题(强制换行、自动换行)

为大家介绍html中textarea对象的换行问题,强制换行、自动换行,有需要的朋友可以参考下。 将以下样式加到显示的table标签中,会按照表格的大小强制换行: style= "table-la...

textarea: 保留textarea中的换行,将源样式显示在页面

项目中有一个需求,就是保留textarea中的换行,在网页中按原格式显示。 由于textarea中的换行为“\r\n", 用js获取textarea中的内容保存到数据库中时,“\r\n"变成了空格。...

HTML里面Textarea换行总结

同文扩展:http://www.cnblogs.com/zhenmingliu/archive/2011/12/27/2303931.html 鸣谢:http://blog.csdn.net/shi...
  • Hollboy
  • Hollboy
  • 2013年12月16日 10:18
  • 1434

怎么正确显示textarea内容的换行

相信不少人都碰到过这个问题:网页中提交评论之类的,评论文字全长也就几十个字而已,用富文本编辑器有点夸张,所以用textarea实现,但评论的内容存到数据库,再读出来显示在网页上,评论的换行不见了,所有...

textarea多行文本域中的换行的小陷阱

WEB攻城狮大冰 2017-02-05 08:57 近期,在项目开发中需要对内容的首行添加一个换行,但是设置后,再次进入设置界面发现换行丢失了,不过数据库中保存的值是正确的,首行有换行的。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Textarea换行输出到前端无效果的推荐处理方法
举报原因:
原因补充:

(最多只允许输入30个字)