最初看到这个命题，觉得不是不是直接监听事件然后设计高度么？于是我想当然的写了这么一段代码：
<script type="text/javascript">
function autoheight(){
this.height= this.scrollHeight+this.height+"px";
}
</script>
<textarea id="" rows="" cols="" onpropertychange="autoheight();" oninput="autoheight()" style="overflow:hidden;"></textarea>这个代码我没有运行，因为一边写就发现不对劲，在propertychange函数中改变property会再次触发propertychange事件，结果就可想而知了。stack overflow。
所以需要换一种思路，新建一个textarea，将同样大的文本放到属性一样的textarea中计算其高度，然后把高度设置到目标textarea中。
<script type="text/javascript">
//基本函数*2
var addHandler = window.addEventListener?
function(elem,event,handler){elem.addEventListener(event,handler);}:
function(elem,event,handler){elem.attachEvent("on"+event,handler);};
var $ = function(id){return document.getElementById(id);}
function autoTextArea(elemid){
//新建一个textarea用户计算高度
if(!$("_textareacopy")){
var t = document.createElement("textarea");
t.id="_textareacopy";
t.style.position="absolute";
t.style.left="-9999px";
document.body.appendChild(t);
}
function change(){
$("_textareacopy").value= $(elemid).value;
$(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";
}
addHandler($("target"),"propertychange",change);//for IE
addHandler($("target"),"input",change);// for !IE
$(elemid).style.overflow="hidden";//一处隐藏，必须的。
$(elemid).style.resize="none";//去掉textarea能拖拽放大/缩小高度/宽度功能
}
addHandler(window,"load",function(){
autoTextArea("target");
});
</script>
<textarea id="target" rows="" cols=""></textarea>
搞清楚原理其实就简单多了。要捕捉textarea的change事件在IE下可以使用propertychange,在!IE下可以使用input。
一些textarea资料做参考：
- textarea 的一些小技巧 http://css-tricks.com/textarea-tricks/
- 本文的直接资料来源：http://www.planeart.cn/?p=1489