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

最初解决办法是使用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>

Textarea自动适用高度且无滚动条解决方案的更多相关文章

  1. iframe子元素相对于父页面滚动条固定(iframe无滚动条,iframe固定高度有滚动条,两种情况)

    一.当iframe自适应高度,无滚动条时候: 例如这样: //随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部 $(parent.window).scroll(function() { v ...

  2. Textarea高度随内容自适应地增长,无滚动条

    <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...

  3. textarea下高度自适应

    1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea  使用h5的属性    <div contenteditable=&quo ...

  4. jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条

    jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...

  5. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

  6. sencha touch textarea 手机上不显示滚动条,且不能滚动

    最近在项目中发现 sencha touch 中的 textarea 在手机上不显示滚动条,也不能滚动. 在浏览器中之所以能显示滚动条滚动,那是浏览器为 textarea 添加的滚动条. 但在手机中是不 ...

  7. textarea 实现高度自动增长

    有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...

  8. js 页面无滚动条添加滚轮事件

    当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...

  9. textarea自适应高度

    最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...

随机推荐

  1. FZU 2297 Number theory【线段树/单点更新/思维】

    Given a integers x = 1, you have to apply Q (Q ≤ 100000) operations: Multiply, Divide. Input First l ...

  2. POJ 1797 Heavy Transportation 【最大生成树的最小边/最小瓶颈树】

    Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can now expand bus ...

  3. 2017 Hackatari Codeathon B. 2Trees(深搜)(想法)

    B. 2Trees time limit per test 0.75 seconds memory limit per test 256 megabytes input standard input ...

  4. SD 一轮集训 day4 圣城鼠

    非常强的构造题. 很显然的是我们要构造一个类似菊花图的东西,因为这样的话两点之间路径的点数会非常少,很容易满足第二个条件. 但是因为直接菊花图的话会不满足第一个条件,,,所以我们可以构造一个类菊花图. ...

  5. [Codeforces-div.1 494C] Helping People

    [Codeforces-div.1 494C] Helping People 试题分析 不难注意到题目所给的性质是一棵树,所以肯定是树形dp. 那么期望没有办法合并,我们还有一种最笨的方法就是求出概率 ...

  6. 【数论】【莫比乌斯反演】【线性筛】bzoj2301 [HAOI2011]Problem b

    对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 100%的数据满足:1≤n≤50000,1≤a≤b ...

  7. Problem B: 零起点学算法92——元素前移1位

    #include<stdio.h> int main() { ],b[]; while(scanf("%d",&n)!=EOF) { ;i<n;i++) ...

  8. 十二. 网络与数据库编程1.IP地址和InetAddress类

    Java语言的优势之一是Java程序能访问网络资源.Java提供一系列的类支持Java程序访问网络资源. TCP/IP协议和IP地址 为了进行网络通信,通信双方必须遵守通信协议.目前最广泛使用的是TC ...

  9. 我告诉你MSDN

    https://msdn.itellyou.cn/ 微软的软件,系统,官方下载

  10. Linux系统/etc/sysconfig目录下没有iptables文件

    在新安装的linux系统中,防火墙默认是被禁掉的,一般也没有配置过任何防火墙的策略,所有不存在/etc/sysconfig/iptables文件. 解决办法: 1.键入以下命令,新建文件 2.复制以下 ...