文本框textarea高度随内容自适应增长收缩代码,JS代码库,德仔网

代码语言

代码分类

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

作者:雨秋 / 发布于2015/9/28/ 763


	<!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>枫芸志 &raquo; 文本框textarea高度自适应增长/伸缩</TITLE>
	</HEAD>
	<BODY>
	<textarea id="txtContent" rows="5" cols="50" onkeyup="ResizeTextarea()" style="overflow-y:hidden;">Textarea高度随内容自适应地增长，无滚动条
	晴枫制作
	http://jb51.net</textarea>
	<script type="text/javascript">
	// 最小高度
	var minRows = 5;
	// 最大高度，超过则出现滚动条
	var maxRows = 12;
	function ResizeTextarea(){
	var t = document.getElementById('txtContent');
	if (t.scrollTop == 0) t.scrollTop=1;
	while (t.scrollTop == 0){
	if (t.rows > minRows)
	t.rows--;
	else
	break;
	t.scrollTop = 1;
	if (t.rows < maxRows)
	t.style.overflowY = "hidden";
	if (t.scrollTop > 0){
	t.rows++;
	break;
	}
	}
	while(t.scrollTop > 0){
	if (t.rows < maxRows){
	t.rows++;
	if (t.scrollTop == 0) t.scrollTop=1;
	}
	else{
	t.style.overflowY = "auto";
	break;
	}
	}
	}
	</script>
	</BODY>
	</HTML>

试试其它关键字

　textarea　　自适应增长　

同语言下

可能有用的

雨秋贡献的其它代码(12)