jQuery - Textarea自动增长插件跨浏览器兼容

Question

我需要一个跨浏览器兼容的插件,当内部文本被写入或删除时,textrea会自动增长和缩小.

我尝试过Elastic插件和Padolsey autoresize的插件.两者都在Firefox 3.6中失败.

Answer 1

我一直在使用以下代码段:Google Code上的Google AppEngine数据存储项目的Autogrow脚本@ Javascript绑定

如果URL可能已关闭或删除,请执行以下代码:

(function($) {

/*
 * Auto-growing textareas; technique ripped from Facebook
 */
$.fn.autogrow = function(options) {

    this.filter('textarea').each(function() {

        var $this       = $(this),
            minHeight   = $this.height(),
            lineHeight  = $this.css('lineHeight');

        var shadow = $('<div></div>').css({
            position:   'absolute',
            top:        -10000,
            left:       -10000,
            width:      $(this).width() - parseInt($this.css('paddingLeft')) - parseInt($this.css('paddingRight')),
            fontSize:   $this.css('fontSize'),
            fontFamily: $this.css('fontFamily'),
            lineHeight: $this.css('lineHeight'),
            resize:     'none'
        }).appendTo(document.body);

        var update = function() {

            var times = function(string, number) {
                for (var i = 0, r = ''; i < number; i ++) r += string;
                return r;
            };

            var val = this.value.replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/&/g, '&amp;')
                                .replace(/\n$/, '<br/>&nbsp;')
                                .replace(/\n/g, '<br/>')
                                .replace(/ {2,}/g, function(space) { return times('&nbsp;', space.length -1) + ' ' });

            shadow.html(val);
            $(this).css('height', Math.max(shadow.height() + 20, minHeight));

        }

        $(this).change(update).keyup(update).keydown(update);

        update.apply(this);

    });

    return this;

} })(jQuery);

要使用,只需在想要自动增长的textareas上调用它.

例:

$('textarea').autogrow();