Javascript 文本框textarea高度随内容自适应增长收缩
程序员文章站
2023-11-17 14:06:05
直接上代码： 方案一：
枫芸志 » 文本框textarea高度自适应增长/伸缩
textarea { height:100px;...
直接上代码：
方案一：
[ctrl+a 全选 注:引入外部js需再刷新一下页面才能执行]
方案一在各浏览器中，文本框随内容自适应增长都没有问题；但在删除内容时收缩方面表现有所差异，ie、opera表现正常，firefox、chrome、safari不会收缩。原因是文本框内容高度小于文本框高度时scrollheight值等于文本框高度，而不是文本框内容高度。
方案二：
<!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>
</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>
方案二在各浏览器中表现相同，皆可使文本框随内容自适应增长和收缩。但有个缺憾是在文本框高度增长的时候，文本框显示会有一个跳动。
另以上两个方案对于通过文本框右键菜单选择剪切、粘贴、删除等命令操作文本内容的情形都无效。可以说暂未找到完美的解决方案，留待以后再来研究。哪位同学如果有完美的方案的话敬请赐教！
原文链接:http://witmax.cn/javascript-textarea-auto-grow.html
方案一：
[ctrl+a 全选 注:引入外部js需再刷新一下页面才能执行]
方案一在各浏览器中，文本框随内容自适应增长都没有问题；但在删除内容时收缩方面表现有所差异，ie、opera表现正常，firefox、chrome、safari不会收缩。原因是文本框内容高度小于文本框高度时scrollheight值等于文本框高度，而不是文本框内容高度。
方案二：
复制代码 代码如下:
<!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>
</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>
方案二在各浏览器中表现相同，皆可使文本框随内容自适应增长和收缩。但有个缺憾是在文本框高度增长的时候，文本框显示会有一个跳动。
另以上两个方案对于通过文本框右键菜单选择剪切、粘贴、删除等命令操作文本内容的情形都无效。可以说暂未找到完美的解决方案，留待以后再来研究。哪位同学如果有完美的方案的话敬请赐教！
其他方案：
- a different approach to elastic textareas 方案二即参考此文后实现
- build an elastic textarea with ext js
- smart textarea: scrollheight in ie, firefox, opera and safari
原文链接:http://witmax.cn/javascript-textarea-auto-grow.html
上一篇： 详解SQL中的DQL查询语言