Question

您好我有这个自动扩展textarea jquery代码，目前，除了Google Chrome之外，它在某种程度上工作。

问题是当我将样式填充：3px添加到textarea时，每当我在框中键入内容时，它将扩展高度。如果我删除样式填充，它将很好地工作。

测试在这里:(使用Google Chrome进行测试）

(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>

我一直试图找出原因，如果有人能在这里说清楚，那将会很感激。

Answer 1

我建议你改用这个插件：

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

StackOverflow将此插件用于其textareas！我还需要说更多吗？

希望这会有所帮助。干杯

PS：或者，您可以使用autogrow plugin

Answer 2

4年前你问过我很伤心，我刚看到它。

问题出现是因为scrollHeight属性返回元素的整个高度（以像素为单位）;包括填充，但不包括边框，滚动条或边距。（至少在Chrome，IE和Firefox中，这三个我已经测试过了。）

参考：Element Scroll Height

所以我在你的Jsfiddle中更改line 17如下，问题解决了。

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

textarea自动扩展

2 个答案: