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> <!-- 控制宽度的自动适应 --> ...
随机推荐
- Appium+python (3) 异常处理
有时候定位时会发现无法定位到具体的元素,右侧元素定位处只告诉你这是一个网页视图: 点击里面的具体元素是无法选中的,船长的做法是回到App里点一下元素,再返回要定位的页面,重新点一下Device Scr ...
- Django之验证码的生成和使用
1.基于PIL生成一个带验证码的图片和验证码,生成验证码图片需要Monaco.ttf字体,可按自己要求更改check_code中的字体和字体文件位置,如下图 #!/usr/bin/env python ...
- vue a href="tel" 拨打电话
走默认的方式失败 <a href="tel:{{telPhone}}">{{telPhone}}</a> 走字符串拼接方法成功 <a :href=&q ...
- SQL的 like 中间字符通配 用法
中间的字符也可以用通配符匹配如果业务需求是找出某表中某字段是“好*****上”的数据,SQL语句应该写成 select * from Table where UserName like '%好%上%' ...
- Kafka之sync、async以及oneway
kafka有同步(sync).异步(async)以及oneway这三种发送方式,某些概念上区分也可以分为同步和异步两种,同步和异步的发送方式通过“producer.type”参数指定,而oneway由 ...
- jeecg中List页面标签的用法
1.t:datagrid的常用属性 1. <t:datagrid name="jeecgDemoList" checkbox="true" sortNam ...
- php 实现四种排序两种查找
function bubbleSort($arr){ $len = count($arr); if($len<=1) { return $arr; } for ($i=0;$i<$len; ...
- Linux系统 Centos6 安装
centos系统ios镜像下载 下载地址:https://mirrors.aliyun.com/centos/,选择对应的版本,然后下载32位,64位,一般的生产环境都是64位DVD格式,iso扩展名 ...
- 前段基础之HTML
HTML 初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s ...
- MySQL Connector/NET 使用小结（踩坑之路）
背景描述 根据项目的需要,需连接MySQL获取数据. 首先,先了解一下项目的情况: 之前的代码是C#编写的的, 运行时:.NETFramework3.5. 由于项目已经部署上线,因此不能升级运行时,这 ...