blog icon indicating copy to clipboard operation
blog copied to clipboard

textarea高度根据内容的自适应

Open wuweijia opened this issue 7 years ago • 0 comments

/**

  • textarea高度根据内容的自适应(eg:$().TextAreaExpander(<minHeight>, <maxHeight>));
  • <minHeight> is the minimum textarea height in pixels (optional)
  • <maxHeight> is the maximum textarea height in pixels (optional) */
(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;
        };

        // no use
        function resizeOriginal(e) {
            // event or initialize element?
            e = e.target || e;
            // resize to original style
            e.style.height = this.original + "px";
        }

        // initialize
        this.each(function () {
            // is a textarea?
            if (this.nodeName.toLowerCase() != "textarea") return;
            // set original height
            // 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);
            this.original = this.offsetHeight;
            // 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("input", ResizeTextarea).bind("focus", ResizeTextarea);
            }
        });
        return this;
    };
})(jQuery);

wuweijia avatar Jul 03 '17 11:07 wuweijia