Question

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

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

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

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 example

$('.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来获得最佳效果。

现场自动增长textarea？

4 个答案: