<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>文本框textarea高度自适应增长/伸缩</TITLE>
</HEAD>
<BODY>
<textarea id="txtContent1" rows="5" cols="50" onkeyup="ResizeTextarea(1)" style="overflow-y:hidden;resize: none;">Textarea高度随内容自适应地增长，无滚动栏
</textarea>
<script type="text/javascript">
// 最小高度
var minRows = 5;
// 最大高度。超过则出现滚动栏
var maxRows = 60;
function ResizeTextarea(index) {
var t = document.getElementById('txtContent' + index);
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>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>文本框textarea高度自适应增长/伸缩</TITLE>
</HEAD>
<BODY>
<textarea id="txtContent1" rows="5" cols="50" onkeyup="ResizeTextarea(1)" style="overflow-y:hidden;resize: none;">Textarea高度随内容自适应地增长，无滚动栏
</textarea>
<script type="text/javascript">
// 最小高度
var minRows = 5;
// 最大高度。超过则出现滚动栏
var maxRows = 60;
function ResizeTextarea(index) {
var t = document.getElementById('txtContent' + index);
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>
自增前：
自增后：
