jquery实现文本框textarea自适应高度
浏览器中默认的文本框是不能根据内容的增多变高，只能固定高度有滚动条，体验不是很好，找了很多方法兼容都不行，总算找到个兼容良好的方法：
<body>
<textareaid="textarea3"style="overflow-y:hidden;height:20px;resize:none">
</textarea>
<scripttype="text/javascript"src="js/jquery-1.7.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
//最小高度和最大高度默认
$("#textarea1").textareaAutoHeight();
//最大高度为100px
$("#textarea2").textareaAutoHeight({maxHeight:100});
//最小高度为50px，最大高度为200px
$("#textarea3").textareaAutoHeight({minHeight:50,maxHeight:200});
})
$.fn.extend({
textareaAutoHeight:function(options){
this._options={
minHeight:0,
maxHeight:1000
}
this.init=function(){
for(varpinoptions){
this._options[p]=options[p];
}
if(this._options.minHeight==0){
this._options.minHeight=parseFloat($(this).height());
}
for(varpinthis._options){
if($(this).attr(p)==null){
$(this).attr(p,this._options[p]);
}
}
$(this).keyup(this.resetHeight).change(this.resetHeight)
.focus(this.resetHeight);
}
this.resetHeight=function(){
var_minHeight=parseFloat($(this).attr("minHeight"));
var_maxHeight=parseFloat($(this).attr("maxHeight"));
if(!$.browser.msie){
$(this).height(0);
}
varh=parseFloat(this.scrollHeight);
h=h<_minHeight?_minHeight:h>_maxHeight?_maxHeight:h;
$(this).height(h).scrollTop(h);
if(h>=_maxHeight){
$(this).css("overflow-y","scroll");
}
else{
$(this).css("overflow-y","hidden");
}
}
this.init();
}
});
</script>
</body>
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。