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

原创 2017年05月22日 16:53:10

解决此问题前,先要知道textarea里的换行标记是 \n。这是我用一个笨办法测试的结果,所用浏览器为火狐和IE11,数据库为mysql。

<textarea placeholder="详情描述要求" id="description"></textarea>

测试办法如下:

    var d = $('#description').val();

    alert(d.split('\n')+'******'+d.split('\r'));   //根据数字判断出换行标记为\n

如果不进行任何处理,textarea的值是可以直接存库的,而且数据库中是不会显示\n这个换行标记的,但是在给页面赋值时,不管用 $('#description').val(从数据库中查出的值)还是$('#description').text(从数据库中查出的值),浏览器都会报错。

    假设从数据库中查出的值为‘测试换行(此处有换行)第二行’,赋值方法为.val(),那么浏览器这样报错:

      $('#description').val('测试换行

          第二行');       报错意思是字符串没有正确结束,这是因为换行在赋值时生效了,所以你的赋值语句为2行,所以会报错。


在网上搜了半天没找到解决办法,我自己想了一个,办法如下:

     在取值存库之前,做此处理:info.desc=$('#description').val().replace(/\n/g,'<br>');  把\n替换为普通字符串<br>,这个普通字符串是随意的,我这里用的是<br>,只是在输入内容时不能输入这个字符串,否则会对结果有影响。替换完之后再往数据库存,这时数据库中的值为:测试换行<br>第二行。

     给页面赋值时,你可以在sql中就把这个字符串<br>替换为‘\n’,也可以在页面通过js把<br>替换为‘\n’,替换之后,再用.val()或.text()赋值,此时不会报错,页面显示正常。


这个方法是我无意中试出来的,可能不太好,还有缺陷,因刚毕业不久,道行太浅,其中的原理我尚且不知,为何会报错及为何这样处理后就不报错我也说不清楚,总之在我的项目中目的是达到了,页面可以正常访问。

如果你有更好的方法或者知道这其中的原委,欢迎留言讨论,期待与你共进步!


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

处理textarea的空格和换行

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

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

在处理一些长文本的时候(仅是较长的纯字符串,还不用大动干戈使用富文本编辑器)经常会用到Textarea标签作为输入控件。Textarea作为一个输入控件有许多优点: 通过CSS可以方便地调节输入框的长...
  • u012939070
  • u012939070
  • 2016-01-17 11:51:26
  • 4846

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个字)