jquery - 实时自动增长文本区域？

Question

我还试图了解如何制作一个实时 jquery 插件，我认为这将是一个很好的例子。

我正在尝试开发的这个插件是一种用于文本区域的自动增长，到目前为止效果很好，但它不适用于实时内容。

http://jsfiddle.net/denislexic/cPBgG/10/

我猜这是因为 each 不是实时的，但我不知道如何解决它。我经常遇到这个问题，但找不到解决方案。

感谢任何帮助，谢谢。

这是代码

$.fn.autogrow = function(options) {
this.filter('textarea').each(function() {

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

    $(this).css('height','hidden');

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

    var update = function() {

        var val = this.value.replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/&/g, '&amp;')
            .replace(/\n/g, '<br/>');

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

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

    update.apply(this);

});

return this;

}

Answer 1

我会做两件事。首先，将插件应用到新创建的文本区域，第二，将 this.filter('textarea').each(function() { 行更改为 $(this).each(function () {.

<强> jsFiddle example 。

$('.liveText').on('click', function() {
    $('<textarea />').appendTo('#copy').autogrow();
});