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

Question

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

我正在尝试开发的这个插件是一种用于 textarea 的 autoGrow，到目前为止效果很好，但它不适用于实时内容。

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

我猜这是因为eachwhich 没有直播，但我不知道如何绕过它。我经常遇到这个问题，我找不到解决方案。

任何帮助表示赞赏，谢谢。

这是代码

$.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

http://jsfiddle.net/cPBgG/18/

您应该只迭代 jQuery 对象，而不是从 DOM 中重新选择它。此外，您并没有要求autogrow()新的文本区域。

编辑

你总是可以绑定到这样的DOMNodeInserted东西（完全未经测试）：

$(document).on('DOMNodeInserted', function(e) { 
  if(e.target.classname == 'autogrow') { 
    $(e.target).autogrow();
  }
});

关键是，您将不得不调用autogrow()您的新文本区域。

Answer 2

我会做两件事。首先，将插件应用到新创建的 textareas 和两个，将this.filter('textarea').each(function() {行更改为$(this).each(function() {.

jsFiddle 示例。

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

Answer 3

$('.liveText').live('click',function(){
    $('<textarea />').appendTo('#copy');
    $('textarea').autogrow(); // This line was added
});

(function($) {

    $.fn.autogrow = function(options) {

        this.filter($(this).selector).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',
                'word-wrap':'break-word',
                'white-space':'pre-wrap'
            }).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;

    }

})(jQuery);
    $('textarea').autogrow()

Answer 4

我在 jQuery 中使用了这种方法。

$(name_textarea).css('overflow','hidden');

setInterval(function(){
    $(name_textarea).css('height', $(name_textarea)[0].scrollHeight+2+'px')
},100);

试试看，你可以在scrollHeight后面玩de number来获得最佳效果。