textarea文本域的高度随内容的变化而变化
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条.
CSS代码:
代码如下:
width:300px;
overflow-y:visible
}
<textarea class="t_area">
随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible
</textarea>
首先，原则上实现textarea自适应必须适用css，不能直接适用“width＝100%”这样的写法，具体示例：
代码如下:
textarea
{
width:100%;
height:100%;
}
</style>
<textarea
name="textarea">
xxxxx
</textarea>
统一在FF、IE下的显示效果：
如果用textarea的属性字数宽度（cols）和行数（rows）来控制textarea的大小你会发现在，在IE和FF下的每行字数和文字的行数都不相同，而且在字数不足滚动的情况下，IE是默认有滚动条的，而FF是没有滚动条的。
那如何控制textarea在IE中和FF中相同的效果呢，其实比较简单：
1、用textarea的宽度（widht）和高度（height）来定义textarea的大小；
2、让滚动条自适应：overflow-y:auto。
IE6中textarea宽度问题
textarea设了100%宽度,在IE7,FIREFOX都正常显示.但在IE6里只要输入文字就会自动增宽.
解决方法:在textarea外再加一个100%宽的div.
让人抓狂的ie6 ！！！！
overflow的允许属性：auto、visible、hidden
示例：
overflow-x:visible;
overflow-y:visible;
用js实现版本
<textarea style='border: 1px solid #94BBE2;width:100%;' rows=15 onpropertychange='this.style.posHeight=this.scrollHeight' id=textarea onfocus='textarea.style.posHeight=this.scrollHeight'>
<Br>
</textarea>
提示：您可以先修改部分代码再运行
css实现版本（不能在标准页面中执行，已经就是不能加
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
）
代码如下:
<textarea
style="width:300px;overflow-y:visible">在这里输入一些字符看一下，当超出初设的文本域高度时，文本域自动伸缩变高。
另一个js版本textarea自适应高度
项目中要求textarea自适应高度，在网上找到这个很好的方法 。记录下来以后备用。
代码如下:
{
var
textarea= document.getElementById("textarea");
textarea.style.posHeight=textarea.scrollHeight;
}
scrollHeight：获取对象的滚动高度。
posHeight：设置或获取以 height
标签属性指定的单位的对象高度。
把方法加在body的onload事件上
<body onload =
"BodyOnLoad();">
综上所述，兼容性什么的用css实现的稍微好点，但是非标准情况下，才可以。
textarea文本域的高度随内容的变化而变化的更多相关文章
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- textarea文本域轻松实现高度自适应
转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css之——div模拟textarea文本域的实现
1.问题的出现: <textarea>标签为表单元素,但一般用于多行文本的输入,但是有一个明显的缺点就是不能实现高度自适应,内容过多就回出现滚动条. 为了实现高度自适应:用div标签来代模 ...
- Kindeditor富文本实现textarea文本域的上传及单独button 按钮绑定(用来实现单文件上传)
在最近项目要新增一个内容文章,文章包含一般的正文内容,其中正文中可以包含多张图片.文章最多包含一个音频文件.文章正文的上传功能我是通过textarea文本域绑定kindeditor编辑器实现的,而单独 ...
- textarea高度随着内容的多少而变化，高度可以删减
问题:可以多行输入,并且输入框的高度随着内容的多少而变化,输入框的高度不能只增不减 由于 input 只能单行输入 textarea可以多行输入,并且高度可以随着内容的增加而增加,但是当内容删减的时候 ...
- textarea文本域宽度和高度（width、height）自己主动适应变化处理
文章来源:http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html <HTML> <HEAD> <TITLE ...
- textarea文本域宽度和高度width及height自动适应实现代码
<HTML> <HEAD> <TITLE>textarea宽度.高度自动适应处理方法</TITLE> <!-- 控制宽度的自动适应 --> ...
随机推荐
- {Emgu}{C#}保存图片、视频等
一.簡介 以前研究所的時候,有使用VC.NET 配合 OpenCV 做影像處理,這東西相當讚,可以省去不少開發時間,今天嘗試看看如何在Visual C# 2008 上使用 OpenCV. 以下引用 O ...
- simulink中几个bit型操作模型
bit concat 将两个fix point 数据 结合到一块. bit rotate 循环移位 bit shift 移位 又分逻辑移位和算术移位,逻辑移位不管最高位0或1,统统移0,算术移位会移 ...
- 洛谷3354(IOI2005)河流——“承诺”
题目:https://www.luogu.org/problemnew/show/P3354 虽说是几个月前曾经讲过的题,但没有题解而自己(花了两个多小时)A了好高兴!!! 这是一个很好的套路:“承诺 ...
- (转)如何获得当前ListVIew包括下拉的所有数据？
ListView listView = activity.getListView();获取的仅仅是当前屏幕显示的list,但是具有下拉信息,不在当前屏幕,但是下拉显示的数据无法或得到.谁知道如何获得当 ...
- apache编译参数详解
常用编译参数: ./configure //配置源代码树–prefix=/usr/local/apache //体系无关文件的顶级安装目录PREFIX ,也就Apache的安装目录.–e ...
- if的用法
if用法举例:求分数的等级 # include <stdio.h> int main(void) { float score; //score分数 printf("请输入您的考试 ...
- 老齐python-基础9(函数)
继续上篇 函数 多参数: >>> def foo(x,y,z,*args,**kargs): ... print(x) ... print(y) ... print(z) ... p ...
- 生产者-消费者问题：介绍POSIX线程的互斥量和条件变量的使用
全局初始化互斥量和条件变量(不全局也行,但至少要对线程启动函数可见,这样才能使用.) static pthread_cont_t cond = PTHREAD_COND_INITIALIZER; st ...
- Linux c- libevent
libevent是一个事件触发的网络库,适用于windows.linux.bsd等多种平台,内部使用select.epoll.kqueue等系统调用管理事件机制.著名分布式缓存软件memcached也 ...
- 黄聪：VS2010中“新建项目”却没有“解决方案”节点，如何调出来
工具->选项->项目和解决方案 把"总是显示解决方案"打 √ 就ok 了