textarea auto expand

Hi I have this auto expand textarea jquery code and currently, it is working somehow there except for Google Chrome.

The issue is when I added the style padding:3px to the textarea, whenever I type something in the box, it will expand the height. If I remove the style padding, it will work nicely.

The test is here: (Use Google Chrome to test)

(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 ) {
                $("#msg").html(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)
                       .bind("input", ResizeTextarea);
            }
        });
        return this;
    };
})(jQuery);

$(document).ready( function( ) {
    $("#message").TextAreaExpander(40);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
.textfield {
    padding:3px 3px;
    width:98%;
}
开发者_如何转开发</style>
<textarea id="message" class="expand textfield"></textarea>
<div id="msg"></div>

I have been trying to figure out why, would appreciate if anyone could shed some light here.

I recommend you use this plugin instead:

http://plugins.jquery.com/project/TextAreaResizer

StackOverflow uses this plugin for its textareas! Do I have to say more?

Hope this helps. Cheers

PS: Or, you could use the autogrow plugin

So sad that you asked 4 years ago and I just saw it.

The issue happens because the scrollHeight property returns the entire height of an element in pixels; including padding, but not the border, scrollbar or margin. (At least in Chrome, IE and Firefox, these three I have tested).

Ref: Element Scroll Height

So I changed line 17 in your Jsfiddle as below, and problem solved.

var h = Math.max(e.expandMin, Math.min(e.scrollHeight - 6, e.expandMax));