Html—让textarea标签中的内容原格式输出的两种办法

在没有使用编辑器而是使用了文本域 <textarea>的情况下，用户所输入的内容呈现的效果并不理想，比如：原本的换行没有保留，全部成了单行显示。

要让在 <textarea>中输入的内容原格式输出有一下两种办法：

使用 <pre>标签是我最开始采用的办法，但是这种方法也有一定的缺陷,比如说我们在使用的编辑器的时候，换行、Tab、空格都会影响到输出结果。如图：

并且， <pre>标签本身自带得有一些样式，比如字体等。如果你的页面有引入bootstrap等css框架，那么受样式影响就更多了，你得再写去覆盖。

因此，这种方法并不推荐。

我们先来看一下 white-space 的定义和属性：

其属性有：

也就是说，我们可以使用 white-space:pre-warp 或 white-space:pre-line 达到我们想要的效果。

两者的区别是：

如图：

white-space:pre-warp 效果如下：

white-space:pre-line 效果如下：

因此，更推荐使用第二种方法。

1、录入以后再使用textarea编辑时与最初录入时不一致,还是说想要把标签解析后显示呢?如果是前一种情况,通常可以用后端脚本将HTML敏感字符转换为HTML实体字符。

2、比如<,>,&等字符，后一种情况用textarea是无法实现的,因该控件只能显示纯文本内容,如果想要显示解析后的网页元素,可以用其它元素模拟,比如DIV等。

3、<div contenteditable="true" id="t"></div>吧div加上contenteditable="true" 就会变成一个可编辑div，可以试试下面试试 鼠标放上去正常是和文本没区别 不过能加html标签div contenteditable="true" style="background:#000color:#FFFwidth:233pxheight:233px">

<span style="color:red">233333</span>

<span style="color:green">原谅绿</span>

aaaaaaaaaaaaaa

</div>

---