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

最初解决办法是使用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. java汉字获取首字母

    前言 在项目中很多时候我们需要获取姓名或者名称的首字母或者全拼,以用于模糊查询或者字母查询,在这里分享一个实例:供小伙伴们参考. 导入jar包 <dependency> <group ...

  2. Tyvj1933绿豆蛙的归宿

    给出一个有向无环图,起点为1终点为N,每条边都有一个长度,并且从起点出发能够到达所有的点,所有的点也都能够到达终点.绿豆蛙从起点出发,走向终点. 到达每一个顶点时,如果有K条离开该点的道路,绿豆蛙可以 ...

  3. FFT实现高精度乘法

    你应该知道$FFT$是用来处理多项式乘法的吧. 那么高精度乘法和多项式乘法有什么关系呢? 观察这样一个$20$位高精度整数$11111111111111111111$ 我们可以把它处理成这样的形式:$ ...

  4. 洛谷——P1292 倒酒

    P1292 倒酒 题目描述 Winy是一家酒吧的老板,他的酒吧提供两种体积的啤酒,a ml和b ml,分别使用容积为a ml和b ml的酒杯来装载. 酒吧的生意并不好.Winy发现酒鬼们都非常穷.有时 ...

  5. Python开发基础-Day19继承组合应用、对象序列化和反序列化,选课系统综合示例

    继承+组合应用示例 class Date: #定义时间类,包含姓名.年.月.日,用于返回生日 def __init__(self,name,year,mon,day): self.name = nam ...

  6. SNOI2017(BZOJ5015~5018)泛做

    T1:礼物 想错方向了,实际上很简单. 我想的是:显然题目求的是$\sum_{i=1}^{n} i^{k}2^{i}$,然后或许可以通过化式子变成与n无关的复杂度? 然后就不停往斯特林数反演和下降幂的 ...

  7. 【DFS】【拓扑排序】【动态规划】Gym - 100642A - Babs' Box Boutique

    给你10个箱子,有长宽高,每个箱子你可以决定哪个面朝上摆.把它们摞在一起,边必须平行,上面的不能突出来,问你最多摆几个箱子. 3^10枚举箱子用哪个面.然后按长为第一关键字,宽为第二关键字,从大到小排 ...

  8. 【分类讨论】【set】Codeforces Round #407 (Div. 2) B. Masha and geometric depression

    模拟一下那个过程,直到绝对值超过l,或者出现循环为止. 如果结束之后,绝对值是超过l的,就输出当前写在黑板上的数量. 如果出现循环,则如果写在黑板上的数量非零,则输出inf(注意!如果陷入的循环是一个 ...

  9. 【Trie图+DP】BZOJ1030[JSOI2007]-文本生成器

    [题目大意] 给出单词总数和固定的文章长度M,求出至少包含其中一个单词的可能文章数量. [思路] 对于至少包含一个的类型,我们可以考虑补集.也就是等于[总的文章可能性总数-不包含任意一个单词的文章总数 ...

  10. HDU 1845 Jimmy’s Assignment(二分匹配)

    Jimmy’s Assignment Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Other ...