textarea自动扩展 [英] textarea auto expand

问题描述

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

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

测试在这里:(使用谷歌浏览器测试）

 （function（$）{// jQuery插件定义$ .fn.TextAreaExpander = function（minHeight，maxHeight）{var hCheck =！（$。browser.msie || $。 browser.opera）; //调整textarea函数的大小ResizeTextarea（e）{// event或initialize element？e = e.target || e; //查找内容长度和框宽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.styl e.overflow =（e.scrollHeight> H ？ auto：hidden）; e.style.height = h +px; e.valLength = vlen; e.boxWidth = ewidth; } return true; } //初始化this.each（function（）{//是textarea？if（this.nodeName.toLowerCase（）！=textarea）return; //设置高度限制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）; //初始调整大小ResizeTextarea（this）; //零垂直填充并添加事件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）;}}）;归还这个; };}}（jQuery）; $（document）.ready（function（）{$（＃message）。TextAreaExpander（40）;}）;  

< pre class =snippet-code-html lang-html prettyprint-override> < 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 =messageclass =expand textfield>< / textarea>< div id =msg>< / div>

我一直试图找出原因，如果有人可以放弃一些，我会很感激点亮这里。

解决方案

我建议你改用这个插件：

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

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

希望这会有所帮助。干杯

PS：或者，您可以使用自动增长插件

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

这篇关于textarea自动扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！