@hunter129

天天学习,好好向上!

   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  21 随笔 :: 5 文章 :: 37 评论 :: 0 Trackbacks
  在textarea中输入的文本。如果含有回车或空格。在界面上显示的时候则不哪么正常。回车消失了,空格变短了。
如何解决这个问题呢。有2种方法。
1.使用<pre>标签
   w3c对pre元素是这样定义的:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
   更详细的内容请参考 http://www.w3school.com.cn/tags/tag_pre.asp
   也就是说包含在pre标签中的回车和空格会正常的显示出来。包括你在页面代码中输入的。所以如果使用pre元素你需要这样写:
  
<pre>要输出的文本</pre>
   ,而不是这样:
  
  <pre>
      要输出的文本
  
</pre>
   后一种写法 文本前的空白也会被显示的。除非你真的希望这样:)
2.对文本内容进行替换。
  回车和空格不能正确显示,究其原因是他们各自的表示方式不同。在textarea里面输入的回车是字符"\r",html中的回车(换行)是"<br/>"。
  textarea中输入的空格是空白" ",而html中的一个空格是"&nbsp;"。理所当然不能正确显示。好了现在知道了原因就有了第二种解决方案了。
  只要我们将输入的文本中相应的"元素"替换成html认识的就ok了。因此下面一行代码即可解决问题:
 
"要输出的文本".replaceAll(" ","&nbsp;").replaceAll("\r","<br/>");
  等等。这里还有一点小问题。把一个空格替换成一个"&nbsp;"空格看上去仍然要少些。如果你喜欢可以替换成2个。
 
  最后,除了回车和空格以外还有很多空白字符如tab等,如果你喜欢可以一并处理了^_^
 
  最后的最后,如果本来的文本是很长的一行,使用pre标签后就不会自动换行。结果页面出现横向滚动条。不知道有没有好的解决方法?
  而将第二种方法处理过的文本放在<p>标签中显示,就可以显示正常。
 
posted on 2008-10-09 21:19 hunter129 阅读(11947) 评论(13)  编辑  收藏 所属分类: css基础

评论

# re: 正确显示taxtarea中输入的回车和空格 2008-10-10 07:54 charlie's logic
谢谢分享  回复  更多评论
  

# re: 正确显示taxtarea中输入的回车和空格 2008-10-10 08:07 sitinspring
总结得不错。  回复  更多评论
  

# re: 正确显示taxtarea中输入的回车和空格 2008-10-10 08:40 toby941
受用了  回复  更多评论
  

# re: 正确显示taxtarea中输入的回车和空格 2008-10-10 10:15 二哥
“使用pre标签后就不会自动换行”。在table属性中加上“style="word-break:break-all;table-layout: fixed"”,在显示的td中加上“style="word-wrap: break-word;"”可以自动换行,如<td style="word-wrap: break-word;"><pre>xxx</pre></td>  回复  更多评论
  

# re: 正确显示taxtarea中输入的回车和空格 2008-10-11 20:29 落Nicety
@二哥
这样设置在ie中确实换行了
不过在ff中就没这么幸运了
依然感谢~~  回复  更多评论
  

# re: 正确显示textarea中输入的回车和空格 2010-02-22 01:41 jameslin
但是我要在默认值里显示回车怎做?如果输入<br/>,它就照搬显示了  回复  更多评论
  

# re: 正确显示textarea中输入的回车和空格 2010-02-22 09:56 落Nicety
@jameslin
不知道你这个默认值是指在textarea中显示,还是在pre中显示

在textarea中默认有个回车这么写就可以了
<textarea>

</textarea>

在pre中显示回车,这么写
<pre>
</pre>  回复  更多评论
  

# re: 正确显示textarea中输入的回车和空格 2010-03-17 09:06 游客
正确显示textarea中输入的回车和空格:

<textarea><pre>要显示的内容</pre></textarea>

是这么用吗?这样的话,<pre> 标签也会显示在textarea中。


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

这样的话,回车符在<textarea>中以<br/>的形式显示,也不合适,应该怎么处理呢?  回复  更多评论
  

# re: 正确显示textarea中输入的回车和空格 2010-03-23 21:57 落Nicety
@游客
不是。。 不知道你想把什么东西显示在textarea中?

这篇文章说的是正确的把 textarea 中输入的东西以html的形式显示出来。
不是把内容显示在textarea中  回复  更多评论
  

# re: 正确显示textarea中输入的回车和空格 2010-12-09 21:58 游客
erer
fdsfsf
sdfsdfsdfsdfsd  回复  更多评论
  

# re: 正确显示textarea中输入的回车和空格 2010-12-09 21:59 游客
&<nbsp;> Test
&<nbsp;> &<nbsp;> &<nbsp;> Test  回复  更多评论
  

# re: 正确显示textarea中输入的回车和空格 2010-12-09 22:00 游客
<br /> sfsd
  回复  更多评论
  

# re: 正确显示textarea中输入的回车和空格[未登录] 2014-03-13 09:31 00
999
00
00
  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: