之前一段时间项目中用到的一个功能,用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下。
直接上代码:
方案一:
枫芸志 » 文本框textarea高度自适应增长/伸缩textarea { height:100px; width: 300px; }
晴枫制作
http://witmax.cn
// 最小高度
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";
}
提示:你可以先修改部分代码再运行。
方案一在各浏览器中,文本框随内容自适应增长都没有问题;但在删除内容时收缩方面表现有所差异,IE、Opera表现正常,Firefox、Chrome、Safari不会收缩。原因是文本框内容高度小于文本框高度时scrollHeight值等于文本框高度,而不是文本框内容高度。
方案二:
枫芸志 » 文本框textarea高度自适应增长/伸缩Textarea高度