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请参考使用率择优选择:))

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012939070/article/details/50531339

处理textarea的空格和换行

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

解决textarea有换行时的数据存库及赋值问题

解决textarea有换行时的数据存库及赋值问题; 解决报错$('#description').val('测试换行 第二行'); 报错意思是字符串没有正确结束,这是因...
  • lzu2216
  • lzu2216
  • 2017-05-22 16:53:10
  • 2354

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

WEB攻城狮大冰 2017-02-05 08:57 近期,在项目开发中需要对内容的首行添加一个换行,但是设置后,再次进入设置界面发现换行丢失了,不过数据库中保存的值是正确的,首行有换行的。 ...
  • u011277123
  • u011277123
  • 2017-03-07 15:01:15
  • 2701

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

textarea文字换行保存到数据后读出来没有换行 解决方案
  • u012726702
  • u012726702
  • 2016-06-27 21:18:51
  • 11148

如何让textarea中输入多行的数据在p标签中换行?

我们在用React开发Web项目的过程中,有的时候,我们需要把textarea中输入的多行字符串,在其他的标签中输出来,比如p标签。但是,往往这个时候,在p标签中输出的内容其默认情况下是不换行的。比如...
  • chancein007
  • chancein007
  • 2017-11-13 23:32:28
  • 2259

关于Textarea的换行问题

  • 2010年06月14日 11:10
  • 2KB
  • 下载

获取textarea标签中的换行符和空格

问题: 获取到textarea标签内的格式(换行符、空格)取到,存入数据库,展示的时候能够保留基本格式。 解决思路: IE9以上、FF、chrome的换行为\n, IE7-8的时候换行为...
  • hj7jay
  • hj7jay
  • 2017-07-04 09:29:11
  • 7516

textarea 显示换行

关键字:JSP换行  textarea 如你所说,servlet中有一字符串要放到textarea中。  Stringstr = "abc \n abc";  out.print(str); ...
  • xueflove
  • xueflove
  • 2017-02-10 10:59:07
  • 603

HTML标签textarea的换行实现

场景:动态往textarea标签中,添加text的文本。同时实现换行添加。 实现: $("#selectId").append("xxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
  • LLLLLiSHI
  • LLLLLiSHI
  • 2017-06-27 13:30:30
  • 2198

textarea 换行问题

textarea 换行问题     我们一般在页面上填写比较多的数据时,一般用textarea,但这时会有一个问题,即内容过多时,如何换行问题,也就是怎样让数据存入数据库及从数据库中读取到页面上...
  • zjb1989923
  • zjb1989923
  • 2011-09-26 13:52:14
  • 1238
收藏助手
不良信息举报
您举报文章:Textarea换行输出到前端无效果的推荐处理方法
举报原因:
原因补充:

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