瀏覽器中默認的文本框是不能根據內容的增多變高，只能固定高度有滾動條，體驗不是很好，找了很多方法兼容都不行，總算找到個兼容良好的方法：
<body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </textarea> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="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 (var p in options) { this._options[p] = options[p]; } if (this._options.minHeight == 0) { this._options.minHeight = parseFloat($(this).height()); } for (var p in this._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); } var h = 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程序設計有所幫助。
新聞熱點
疑難解答
