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

今日的系统需要动态显示一项数据库里面的内容，该内容包含换行等格式字符，要求如实的反应在页面上。 最初解决办法是使用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; istrlen; 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