html文本域自动自适应,【Javascript】文本框textarea高度随内容自适应增长收缩

之前一段时间项目中用到的一个功能，用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高度随内容自适应地增长，无滚动条

晴枫制作

http://witmax.cn

// 最小高度

var minRows = 5;

// 最大高度，超过则出现滚动条

var maxRows = 12;

func