autoTextarea-文本框依据输入内容自适应高度
autoTextarea-文本框根据输入内容自适应高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>autoTextarea</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:360, //默认最大高度 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 (this.scrollHeight > opts.maxHeight) { height = opts.maxHeight; style.overflowY = 'scroll'; } else { height = this.scrollHeight; style.overflowY = 'hidden'; } style.height = height + 'px'; } }); }); }; })(jQuery); </script> </head> <body> <textarea id="ta" style="width:200px;height:28px;"></textarea> <script> $('#ta').autoTextarea(); //$('#ta').autoTextarea({maxHeight:240,minHeight:30}); 这是完整用法 </script> </body> </html>