<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>JQuery plugin textareaHeightAuto</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0} .textarea {overflow: hidden;margin: 50px;height: 100px;width: 400px;border: 1px solid #ccc;} .button {padding: 5px 10px;cursor: pointer;} </style> </head> <body> <textarea name="" class="area" ></textarea> <textarea name="" class="area" ></textarea> <script type="text/javascript"> (function($){ $.fn.adaptiveTextarea = function(options){ $.fn.adaptiveTextarea.defaults = { "maxH":99999, "minH":0 }; var opts = $.extend({},$.fn.adaptiveTextarea.defaults,options); return this.each(function(){ var $this = $(this); var defaultH = opts.minH || $this.height(); //初始化 $this.css({ "overflow":"auto", "resize":"none", "height":defaultH + "px" }); $this.off("propertychange input").on("propertychange input",function(){ this.style.height = defaultH + "px"; if(opts.maxH >= opts.minH){ this.style.height = Math.min(this.scrollHeight,opts.maxH) + "px"; } }); }); } })(jQuery); //调用 $(function(){ $(".area").adaptiveTextarea({ minH:80, maxH:300 }); }); </script> </body> </html>
/* * @author 愚人码头 * 【jQuery插件】autoTextarea-文本框根据输入内容自适应高度 * 参数 maxHeight:null,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度 * 参数 minHeight:$(this).height()//默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示 * 更多http://www.css88.com/archives/3948 */ (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:null,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度 minHeight:$(this).height() //默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示 }; var opts = $.extend({},defaults,options); return $(this).each(function() { $(this).bind("paste cut keydown keyup focus blur",function(){ var height,style=this.style; this.style.height = opts.minHeight + 'px'; if (this.scrollHeight > opts.minHeight) { if (opts.maxHeight && this.scrollHeight > opts.maxHeight) { height = opts.maxHeight; style.overflowY = 'scroll'; } else { height = this.scrollHeight; style.overflowY = 'hidden'; } style.height = height + 'px'; } }); }); }; })(jQuery);
JS代码，默认的参数及调用：
//默认的参数
$(".chackTextarea-area").autoTextarea({
maxHeight:220,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度
minHeight:$(this).height()//默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示
})
$(".chackTextarea-area").autoTextarea({maxHeight:220});
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>JQuery plugin textareaHeightAuto</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0} .textarea {overflow: hidden;margin: 50px;height: 100px;width: 400px;border: 1px solid #ccc;} .button {padding: 5px 10px;cursor: pointer;} </style> </head> <body> <textarea id="J_Txt" class="textarea"></textarea> <button type="button" id="J_Btn" class="button">destroy</button> <script type="text/javascript"> ;(function($){ var methods = { init: function(options){ debug('textareaHeightAuto start !'); var main_opts = $.extend({}, $.fn.textareaHeightAuto.defaults, options); return this.each(function(){ var $this = $(this); debug($this); //var opts = $.metadata ? $.extend({}, main_opts, $this.metadata()) : main_opts; var opts = main_opts; $this.data('textareaHeightAuto', opts); $this.on(opts.eventName, function(){ var $target = $(this); // 这里是比较重要的地方 必须先对textarea的高度进行设置，然后才能取 scrollHeight 的值 // 这是因为 scrollHeight 返回的是 元素内容的高度 + 滚动条可以滚动的高度值，明白了这点，下面就可以理解了 $target.height(opts.minHeight - opts.bottomHeight);// 增加这个间隔值是为了修复设置textarea高度时(特别是在最后一行回车时)跳动太大的情况 var scrollHeight = $target[0].scrollHeight + opts.bottomHeight;// 一加一减，相互抵消 if((scrollHeight) > opts.minHeight){ if(scrollHeight < opts.maxHeight){ $target.css({'overflow-y': 'hidden'}).height(scrollHeight); }else{ $target.css({'overflow-y': 'auto'}).height(opts.maxHeight); } }else{ $target.css({'overflow-y': 'hidden'}).height(opts.minHeight); } }); }); }, destroy: function(){ return this.each(function(){ var $this = $(this), data = $this.data('textareaHeightAuto'); $this.off(data.eventName); $this.css({height: data.minHeight});// 不知道重置(还原?)textarea高度是否有必要 $this.removeData('textareaHeightAuto'); }); } }; $.fn.textareaHeightAuto = function(method){ if(methods[method]){ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); }else if(typeof method === 'object' || !method){ return methods.init.apply(this, arguments); }else{ $.error('Method '+ method + ' does not exist on jQuery.textareaHeightAuto'); } }; // 内部方法 function debug(obj){ if(window.console && window.console.log){ window.console.log(obj); } } // 可以适当暴露一些可扩展的方法 //$.fn.textareaHeightAuto.fun = function(str){}; // 把默认参数放在外面，使得用户可以在插件之外就修改插件默认设置 // $.fn.textareaHeightAuto.defaults.bottomHeight = 0;// 修改插件的默认设置 // $('#textarea').textareaHeightAuto({bottomHeight: 0});// 修改应用插件的当前元素的默认设置 $.fn.textareaHeightAuto.defaults = { maxHeight: 600, minHeight: 100, bottomHeight: 18, eventName: 'paste cut keydown keyup focus blur' }; })(jQuery); $(document).ready(function(){ $('#J_Txt').textareaHeightAuto(); $('#J_Btn').on('click', function(){ $('#J_Txt').textareaHeightAuto('destroy'); $(this).attr('disabled', true); }); }); </script> </body> </html>
//最小高度和最大高度默认 $("#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(); } });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>Javascript 实现 Textarea 自动伸缩，兼容IE6、IE7、IE8、IE9、Firefox、Safari、Chome、Opera</title> <style type="text/css"> textarea {overflow:hidden;} </style> </head> <body> <textarea id="txt"></textarea> </table> <script type="text/javascript"> var minRows = 5; // 最大高度，超过则出现滚动条 var maxRows = 12; function autoResize(){ var t = document.getElementById('txt'); if (t.scrollTop == 0) t.scrollTop=1; while (t.scrollTop == 0){ if (t.rows > minRows) t.rows--; else break; t.scrollTop = 1; if (t.rows < maxRows) t.style.overflowY = "hidden"; if (t.scrollTop > 0){ t.rows++; break; } } while(t.scrollTop > 0){ if (t.rows < maxRows){ t.rows++; if (t.scrollTop == 0) t.scrollTop=1; } else{ t.style.overflowY = "auto"; break; } } } </script> </body> </html>