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程序设计有所帮助。