jQuery elastic set min height for textbox

this plugin elastic,

(function (jQuery) {
    jQuery.fn.extend({
        elastic: function () {
            var mimics = ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontSize', 'lineHeight', 'fontFamily', 'width', 'fontWeight'];
            return this.each(function ()开发者_如何学C {
                if (this.type != 'textarea') {
                    return false;
                }
                var $textarea = jQuery(this),
                    $twin = jQuery('<div />').css({
                        'position': 'absolute',
                        'display': 'none',
                        'word-wrap': 'break-word'
                    }),
                    lineHeight = parseInt($textarea.css('line-height'), 10) || parseInt($textarea.css('font-size'), '10'),
                    minheight = parseInt($textarea.css('height'), 10) || lineHeight * 3,
                    maxheight = parseInt($textarea.css('max-height'), 10) || Number.MAX_VALUE,
                    goalheight = 0,
                    i = 0;
                if (maxheight < 0) {
                    maxheight = Number.MAX_VALUE;
                }
                $twin.appendTo($textarea.parent());
                var i = mimics.length;
                while (i--) {
                    $twin.css(mimics[i].toString(), $textarea.css(mimics[i].toString()));
                }

                function setHeightAndOverflow(height, overflow) {
                    curratedHeight = Math.floor(parseInt(height, 10));
                    if ($textarea.height() != curratedHeight) {
                        $textarea.css({
                            'height': curratedHeight + 'px',
                            'overflow': overflow
                        });
                    }
                }

                function update() {
                    var textareaContent = $textarea.val().replace(/&/g, '&amp;').replace(/  /g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
                    var twinContent = $twin.html();
                    if (textareaContent + '&nbsp;' != twinContent) {
                        $twin.html(textareaContent + '&nbsp;');
                        if (Math.abs($twin.height() + lineHeight - $textarea.height()) > 3) {
                            var goalheight = $twin.height() + lineHeight;
                            if (goalheight >= maxheight) {
                                setHeightAndOverflow(maxheight, 'auto');
                            } else if (goalheight <= minheight) {
                                setHeightAndOverflow(minheight, 'hidden');
                            } else {
                                setHeightAndOverflow(goalheight, 'hidden');
                            }
                        }
                    }
                }
                $textarea.css({
                    'overflow': 'hidden'
                });
                $textarea.keyup(function () {
                    update();
                });
                $textarea.live('input paste', function (e) {
                    setTimeout(update, 250);
                });
                update();
            });
        }
    });
})(jQuery);

It automatically set min height of textarea as 32px.. i need it to be set as 20px, any idea how? as this plugin override the css and style tag.

According to this line in the code:

minheight = parseInt($textarea.css('height'), 10) || lineHeight * 3,

minheight is determined by either the height, or the line-height of the textearea, whichever is available.

This means that to get a min-height of 20px, you need to simply set the height of the textarea to 20px in your stylesheet.

The following tweak worked for me

1.Set lineHeight to zero .

2.Alter the numeric height entered in

minheight = parseInt($textarea.css('height'),5) || lineHeight*3

to the desired height you want

Quick look demonstration here : jquery elastic height change