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> <!-- 控制宽度的自动适应 --> ...
随机推荐
- Asp.net Global 定时执行
在复杂的业务应用程序中,有时候会要求一个或者多个任务在一定的时间或者一定的时间间隔内计划进行,比如定时备份或同步数据库,定时发送电子邮件,定期处理用户状态信息,支付系统中定期同步异常账单等等,我们称之 ...
- c++ template不能有cpp
c++的template只能把生命和定义都放在.h文件里,不然会出错
- 转发 GSLB概要和实现原理
What is GSLB Global Server Load Balancing 中文:全局负载均衡 SLB(Server load balancing)是对集群内物理主机的负载均衡,而GSLB是对 ...
- 笔记：FastAdmin 之 jQuery 选择器 $("[name$='[]']", form) 学习
笔记:FastAdmin 之 jQuery 选择器 $("[name$='[]']", form) 学习 $("[name$='[]']", form)这个是什 ...
- linux通过wget直接下载jdk，避免用户验证
下载地址 :http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 下载语句: wget ...
- MesureDeviceWebServiceDAS
package com.accu.business.pms.webservice; import java.net.URL; import javax.xml.namespace.QName;impo ...
- 【转】【备忘录】MySQL性能优化的21个最佳实践 和 mysql使用索引
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我 们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...
- CMapStringToPtr添加与释放
// 创建MapStringToPtr CMapStringToPtr m_prjFiles; CStringList m_fileList; m_fileList.AddTail(_T(" ...
- DS02--线性表
一.PTA实验作业 题目1:线性表元素的区间删除 给定一个顺序存储的线性表,请设计一个函数删除所有值大于min而且小于max的元素.删除后表中剩余元素保持顺序存储,并且相对位置不能改变. 1. 设计思 ...
- mac 终端命令行操作
1,root 切换 sudo su 2,安装brew curl -L http://github.com/mxcl/homebrew/tarball/master | tar xz --strip 1 ...