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 = "<";
break;
case '>':
destr = ">";
break;
case '\"':
destr = """;
break;
case '&':
destr = "&";
break;
case 13:
destr = "<br>";
break;
case 32:
destr = " ";
break;
default :
destr = "" + ch;
break;
}
restring = restring + destr;
}
return "" + restring;
}
提交前调用此函数即可。
显示时,直接输出:
<div><%=content%></div>
Textarea自动适用高度且无滚动条解决方案的更多相关文章
- iframe子元素相对于父页面滚动条固定(iframe无滚动条,iframe固定高度有滚动条,两种情况)
一.当iframe自适应高度,无滚动条时候: 例如这样: //随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部 $(parent.window).scroll(function() { v ...
- Textarea高度随内容自适应地增长,无滚动条
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...
- textarea下高度自适应
1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea 使用h5的属性 <div contenteditable=&quo ...
- jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条
jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- sencha touch textarea 手机上不显示滚动条,且不能滚动
最近在项目中发现 sencha touch 中的 textarea 在手机上不显示滚动条,也不能滚动. 在浏览器中之所以能显示滚动条滚动,那是浏览器为 textarea 添加的滚动条. 但在手机中是不 ...
- textarea 实现高度自动增长
有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...
- js 页面无滚动条添加滚轮事件
当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...
- textarea自适应高度
最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...
随机推荐
- FZU 2297 Number theory【线段树/单点更新/思维】
Given a integers x = 1, you have to apply Q (Q ≤ 100000) operations: Multiply, Divide. Input First l ...
- POJ 1797 Heavy Transportation 【最大生成树的最小边/最小瓶颈树】
Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can now expand bus ...
- 2017 Hackatari Codeathon B. 2Trees(深搜)(想法)
B. 2Trees time limit per test 0.75 seconds memory limit per test 256 megabytes input standard input ...
- SD 一轮集训 day4 圣城鼠
非常强的构造题. 很显然的是我们要构造一个类似菊花图的东西,因为这样的话两点之间路径的点数会非常少,很容易满足第二个条件. 但是因为直接菊花图的话会不满足第一个条件,,,所以我们可以构造一个类菊花图. ...
- [Codeforces-div.1 494C] Helping People
[Codeforces-div.1 494C] Helping People 试题分析 不难注意到题目所给的性质是一棵树,所以肯定是树形dp. 那么期望没有办法合并,我们还有一种最笨的方法就是求出概率 ...
- 【数论】【莫比乌斯反演】【线性筛】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 ...
- Problem B: 零起点学算法92——元素前移1位
#include<stdio.h> int main() { ],b[]; while(scanf("%d",&n)!=EOF) { ;i<n;i++) ...
- 十二. 网络与数据库编程1.IP地址和InetAddress类
Java语言的优势之一是Java程序能访问网络资源.Java提供一系列的类支持Java程序访问网络资源. TCP/IP协议和IP地址 为了进行网络通信,通信双方必须遵守通信协议.目前最广泛使用的是TC ...
- 我告诉你MSDN
https://msdn.itellyou.cn/ 微软的软件,系统,官方下载
- Linux系统/etc/sysconfig目录下没有iptables文件
在新安装的linux系统中,防火墙默认是被禁掉的,一般也没有配置过任何防火墙的策略,所有不存在/etc/sysconfig/iptables文件. 解决办法: 1.键入以下命令,新建文件 2.复制以下 ...