工作要用到textarea自适应高度的场景,于是就网上找了个,闲话少说,上代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .chackTextarea-area{line-height: 20px; font-size: 14px;padding: 0;border: 1px solid #CDCDCD; width: 400px;} </style> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:null, minHeight:$(this).height() }; var opts = $.extend({},defaults,options); $(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); </script> </head> <body> <div> <textarea name="textarea" id="textarea" cols="60" rows="1" class="chackTextarea-area"></textarea> </div> <script type="text/javascript"> $(".chackTextarea-area").autoTextarea({maxHeight:220}); </script> </body> </html>
原创文章,作者:kepupublish,如若转载,请注明出处:https://blog.ytso.com/98524.html