文本框textarea高度随内容自适应增长收缩_中国网站频道，官方网站，中国品牌网站，网页特效，JS广告，网站截图，酷站推荐，图标，APP，按钮，中国网站第一品牌频道网站频道，div css，flash广告代码，网页特效，png图片，后台模板，flash特效，软件下载，中文字体下载，英文字体下载，

> 代码 > 表单

文本框textarea高度随内容自适应增长收缩

作者：vip_260 来源：未知日期：2010/12/17 14:00:34 人气：标签：

文本框textarea高度随内容自适应增长收缩

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>文本框textarea高度随内容自适应增长收缩</TITLE>
<style>
	textarea { height:100px; width: 300px; }
</style>
</HEAD>
<BODY>
<!--以下代码中onpropertychange：IE支持；oninput：FireFox支持；为了<a href="http://www.v404.cn/search/?/兼容/" title="搜索“兼容”的相关文章" target="_blank" class="sitelink">兼容</a>IE和FF，所以加上了这个两个；-->
    <textarea id="txtContent" rows="1" onpropertychange="ResizeTextarea()"  oninput="ResizeTextarea()" onkeyup="ResizeTextarea()">网站频道
www.v404.cn</textarea>
    <script type="text/javascript">
    // 最小高度
    var minHeight = 100;
    // 最大高度，超过则出现滚动条
    var maxHeight = 300;
	function ResizeTextarea(){
		var t = document.getElementById('txtContent');
		h = t.scrollHeight;
		h = h > minHeight ? h : minHeight;
		h = h > maxHeight ? maxHeight : h;
		t.style.height = h + "px";
	}
	</script>
</BODY>
</HTML>

公告

更新

> 代码 > 表单

文本框textarea高度随内容自适应增长收缩