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在发布用户的文章时好像没有处理输入的换行和空格,之前没有很在意,因为这次我辛苦缩进的代码居然显示一团糟,有点接受不了,鉴于最近做的需求遇到了这个问题,所以说一下这个问题...
  • THEANARKH
  • THEANARKH
  • 2016年05月28日 01:39
  • 8891

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

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

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

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

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

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

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

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

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

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

textarea里显示换行<br>

textarea换行 在easyui中的datagrid中使用行内编辑时textarea的换行保存到mysql数据库为\n 在textarea中输入回车符 在js读取textarea中的值...
  • youyou_yo
  • youyou_yo
  • 2016年08月25日 09:10
  • 4701

Jquery实现textarea自动换行

今天做一个在线聊天小程序的时候,利用jquery把文本框中的内容放入文本域,发现嵌入Html代码没有反应,这是去网上查查没 找到答案,不过看到了这样一句话: jQuery的text()和val()...
  • wangnetkang
  • wangnetkang
  • 2012年07月05日 15:40
  • 14933

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

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

实现textarea不自动换行

  要实现textarea不自动换行,只需要加个样式就ok  style="word-wrap:normal;"
  • ms2146
  • ms2146
  • 2009年12月31日 09:34
  • 4946
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Textarea换行输出到前端无效果的推荐处理方法
举报原因:
原因补充:

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