关于<textarea>中的“回车”在后台，mysql数据库，html和<textarea>中的显示问题总结

       当然不得不说这是一个被问烂的问题，可是被问烂那说明这个问题经常出现。度娘的结果却是是五花八门，有采用类似Fckeditor ，Ckeditor，和百度的 Ueditor. 这样的网页文本格式编辑器插件的，我也用过一个，不过对于小型项目来说太烦，把js的包加载进去启动项目时非常耗时；当然也有很多就用textarea的，还有用div的contentable属性让div可以编辑的。。。不能说错，但用在自己身上总有不对的地方。之后的还得自己慢慢调试！

     首先解释一下在不同的区域他们现实的不同格式吧。当然本篇先仅讨论“回车”这个字符。

1.在<textarea>中，“回车”（实际意义是换行）这一字符是"\n",如果存在”<br/>“,在其中也显示为”<br/>“,我猜想”\r\n“也显示为换行;

 

2.在mysql数据库中可以存放很多种"回车"，但是“回车”代表了不同的含义，一个是换行，一个就是回车本身。如果你将带有换行的文本复制到数据库中，你可以明显的看出是有换行的一个特点的。

，在数据库中换行是“\r\n”，当然你存的时候是，取出来也是。

 

3.html中“回车“，是换行符”<br/>"。

 

4.在td中的title中，如果设置了值，它的换行是“\r\n”,回车是“\n”

 

5.最后的重点是java后台：

       在传到后台的时候呢,我用一个输出ASCII码的方法输出了“回车”,然而并没有什么卵用。但是后来我发现不是后台无法输出的问题，而是在前台传递参数时用的是get方式，如果使用post，这些格式是都可以传过来的。再次尝试发现“回车”这个字符在java后台中输出是一个“”+“13”+“10"。对照ASCII码表，由于一些符号是不允许输出的所以“”代表了空，"13"代表的是回车符，"10"代表的是换行符。所以显而易见，如果使用post方式，传到后台，存入数据库都没有问题。但是在html中就有问题。

 

解决方法就很明显：

最简单的方式就是用post传递方式，在textarea不会存在问题，但是在html中显示会存在没有换行的问题。

空格也将会只显示一个" ",度娘的结果很少说用post传参，只有一些大神直接说了句，”传递的是什么，后台拿到的就是什么呀“，回答了等于没回答。。。。。PS:后补部分：之后发现，只要在html中显示的地方，只要将数据库中的数据直接放在<pre></pre>标签中。即可显示正常。

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

提示：制表符（tab）在 <pre> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。

提示：如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 "&lt;" 代表 "<"，"&gt;" 代表 ">"，"&amp;" 代表 "&"。

 或者采用评论区的网友给的：在显示时，给显示数据套上一个<div>，然后设置style的white-space: pre-wrap。效果类似与上述的pre标签，非常感谢。

这里再补充一下，由于回车是一个换行的标识，那么数据在标签中也必须应该有自动换行的效果，而不会撑爆一个div或者其他容器，这里就要对容器设置style中的width:600px;，同时还有WORD-WRAP: break-word;这个属性值，那么数据到达宽度长度时就会自动换行，测试时建议不要使用连续的字母和数字，因为没有空格，就被认定为是一个单词，这样 换行就会出现 提前换行的效果。这也是我们不愿意看到的。

我觉得最好的方式是修改格式，存入数据库时，"\n"换行全部替换为"<br/>",这样的好处是，如果有其他人做前台显示时，放在html中就可以直接显示，不会出现格式问题。

修改显示方式也很麻烦，如下：

1.在前台用get方式传递回车时，需要把content内容中的“\n”替换为“<br/>”或者"<br>";

while(-1!=content.indexOf("\n"))
{
   content = content.replace("\n","<br/>");
<}

 2.在前台需要编辑修改content内容时，后台从数据中取后要将相反操作，即将“<br/>”或者"<br>"替换为”\n”:

content =content.replace("<br/>", "\n");

 content同样放在<textarea>中。

3.当然也可以放入<textarea>中显示，但是最好设置<textarea>的disable为disable;

4.如果是在html中显示的话，那么就不需要做任何处理，直接获取就可以了，其中的"<br/>"在html中就自然的是换行的行为。

 

 

 

写的比较仓促，也许有很多错误，或者错乱的地方。发现有问题可以留言给我。。。。工作如狗啊。后期还会修改。

 

评论

2 楼 li370604005 2015-06-24  

酷的飞上天空 写道

富文本编辑器里面的换号不错考虑，提交到后台基本不是br就是p
仅使用textarea的情况下，在显示的界面给父级div设置一个熟悉就解决了，
属性如下：
white-space: pre-wrap

我没用div直接写在了<pre>标签里。今天同事在网上找了CSS，就是你说的这个方法，但是前提是让我把存在数据库中的<br>都换成了<p><p/>

1 楼 酷的飞上天空 2015-06-19  

富文本编辑器里面的换号不错考虑，提交到后台基本不是br就是p
仅使用textarea的情况下，在显示的界面给父级div设置一个熟悉就解决了，
属性如下：
white-space: pre-wrap