最初看到這個(gè)命題，覺得不是不是直接監(jiān)聽事件然后設(shè)計(jì)高度么？于是我想當(dāng)然的寫了這么一段代碼：
<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>這個(gè)代碼我沒有運(yùn)行，因?yàn)橐贿厡懢桶l(fā)現(xiàn)不對(duì)勁，在propertychange函數(shù)中改變property會(huì)再次觸發(fā)propertychange事件，結(jié)果就可想而知了。stack overflow。
所以需要換一種思路，新建一個(gè)textarea，將同樣大的文本放到屬性一樣的textarea中計(jì)算其高度，然后把高度設(shè)置到目標(biāo)textarea中。
<script type="text/javascript">
//基本函數(shù)*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){
//新建一個(gè)textarea用戶計(jì)算高度
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>
搞清楚原理其實(shí)就簡(jiǎn)單多了。要捕捉textarea的change事件在IE下可以使用propertychange,在!IE下可以使用input。
一些textarea資料做參考：
- textarea 的一些小技巧 http://css-tricks.com/textarea-tricks/
- 本文的直接資料來(lái)源：http://www.planeart.cn/?p=1489