最初看到這個命題，覺得不是不是直接監聽事件然后設計高度么？于是我想當然的寫了這么一段代碼：
<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