Textarea自动适用高度且无滚动条解决方案

今日的系统需要动态显示一项数据库里面的内容，该内容包含换行等格式字符，要求如实的反应在页面上。

最初解决办法是使用textarea控件，代码如下：

<textarea style="border:0;width:100%；overflow-y:auto;">

<%=content%>

</textarea>

但此方法仅适用于IE浏览器，chrome、firefox等都有问题。

后来想起用pre标签，同样能达到如实反应内容的目的，为达到自动换行的目的，采用网上提出的如下CSS样式表：

pre {
white-space:pre-wrap; /* css-3 */
white-space:-moz-pre-wrap; /* Mozilla, since 1999 */
white-space:-pre-wrap; /* Opera 4-6 */
white-space:-o-pre-wrap; /* Opera 7 */
word-break:break-all;
}

虽然网上找到的文章中表示兼容IE，但是，我在IE8浏览器中，内容不能自动换行。

问题再次出现。

如何解决？让浏览器自己选择呈现标签！如果是IE浏览器，则使用textarea，否则使用pre标签！那怎么实现呢？这里可以采用<!-IF [IE]>标签，此标签是IE浏览器的条件注释<!–[if IE]>….<![endif]–>,请参考网上相关说明。

最后，得到最终的代码：

<!--[if !IE]><!--><pre><%=content%></pre><!--<![endif]-->
<!--[if IE]><textarea style="width:98%;overflow-y:visible;border:0;"><%=content%></textarea>

<![endif]-->
常见的浏览器，都能自动完整的显示出数据项，完美的解决了问题。

   

当然，对于此问题，还有一种解决办法：在提交content内容之前，转为html代码保存，首先定义一JavaScript函数：

function TextToHtml(sourcestr)
{
var restring="", destr = "";
var strlen=sourcestr.length;
for (var i=0; i<strlen; i++)
{
var ch=sourcestr.charAt(i);
switch (ch)
{
case '<':
destr = "&lt;";
break;
case '>':
destr = "&gt;";
break;
case '\"':
destr = "&quot;";
break;
case '&':
destr = "&amp;";
break;
case 13:
destr = "<br>";
break;
case 32:
destr = "&nbsp;";
break;
default :
destr = "" + ch;
break;
}
restring = restring + destr;
}
return "" + restring;
}

提交前调用此函数即可。

显示时，直接输出：

<div><%=content%></div>