正确显示textarea中输入的回车和空格

Posted 狂奔的小马扎

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了正确显示textarea中输入的回车和空格相关的知识,希望对你有一定的参考价值。

在textarea中输入的文本。如果含有回车或空格。在界面上显示的时候则不那么正常。回车消失了,空格变短了。


如何解决这个问题呢。有2种方法。

1、使用<pre>标签

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

也就是说包含在pre标签中的回车和空格会正常的显示出来。包括你在页面代码中输入的。所以如果使用pre元素你需要这样写:

<pre>要输出的文本</pre>

而不是这样:

<pre>
      要输出的文本
</pre>

后一种写法 文本前的空白也会被显示的。除非你真的希望这样

 

2、对文本内容进行替换。

回车和空格不能正确显示,究其原因是他们各自的表示方式不同。在textarea里面输入的回车是字符"\r",html中的回车(换行)是"<br/>"。

textarea中输入的空格是空白" ",而html中的一个空格是"  "。理所当然不能正确显示。好了现在知道了原因就有了第二种解决方案了。

只要我们将输入的文本中相应的"元素"替换成html认识的就ok了。因此下面一行代码即可解决问题:

"要输出的文本".replaceAll(" ","").replaceAll("\r","<br/>");

等等。这里还有一点小问题。把一个空格替换成一个" "空格看上去仍然要少些。如果你喜欢可以替换成2个。

最后,除了回车和空格以外还有很多空白字符如tab等,如果你喜欢可以一并处理了^_^

最后的最后,如果本来的文本是很长的一行,使用pre标签后就不会自动换行。结果页面出现横向滚动条。不知道有没有好的解决方法?

而将第二种方法处理过的文本放在<p>标签中显示,就可以显示正常。

 

以上是关于正确显示textarea中输入的回车和空格的主要内容,如果未能解决你的问题,请参考以下文章

将代码片段插入数据库并在 textarea 中以相同方式显示

由一个项目需求引发的 - textarea中的换行和空格

用空格替换文本区域中的逗号、破折号和输入键

我想扩JS替换textarea 中回车字符和空格

输入在 Internet Explorer 8 中的 textarea 中不起作用

a-textarea的不满一行就换行问题