/** * TextAreaExpander plugin for jQuery * v1.0 * Expands or contracts a textarea height depending on the * quatity of content entered by the user in the box. * * By Craig Buckler, Optimalworks.net * * As featured on SitePoint.com: * http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/ * * Please use as you wish at your own risk. */ /** * Usage: * * From JavaScript, use: * $().TextAreaExpander(, ); * where: * is the DOM node selector, e.g. "textarea" * is the minimum textarea height in pixels (optional) * is the maximum textarea height in pixels (optional) * * Alternatively, in you HTML: * Assign a class of "expand" to any * * Or assign a class of "expandMIN-MAX" to set the * The textarea will use an appropriate height between 50 and 200 pixels. */ (function($) { // jQuery plugin definition $.fn.TextAreaExpander = function(minHeight, maxHeight) { var hCheck = !($.browser.msie || $.browser.opera); // resize a textarea function ResizeTextarea(e) { // event or initialize element? e = e.target || e; // find content length and box width var vlen = e.value.length, ewidth = e.offsetWidth; if (vlen != e.valLength || ewidth != e.boxWidth) { if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px"; var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax)); e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden"); e.style.height = h + "px"; e.valLength = vlen; e.boxWidth = ewidth; } return true; }; // initialize this.each(function() { // is a textarea? if (this.nodeName.toLowerCase() != "textarea") return; // set height restrictions var p = this.className.match(/expand(\d+)\-*(\d+)*/i); this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0); this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999); // initial resize ResizeTextarea(this); // zero vertical padding and add events if (!this.Initialized) { this.Initialized = true; $(this).css("padding-top", 0).css("padding-bottom", 0); $(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea); } }); return this; }; })(jQuery); // initialize all expanding textareas jQuery(document).ready(function() { jQuery("textarea[class*=expand]").TextAreaExpander(); });