2

また、一般的にライブjqueryプラグインを作成する方法を理解しようとしています.これは良い例だと思いました.

私が開発しようとしているこのプラグインは、テキストエリア用の 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;

}
4

4 に答える 4

1

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

jQuery オブジェクトを反復するだけで、DOM から再選択しないでください。autogrow()また、新しいテキスト領域を呼び出していませんでした。

編集

いつでもDOMNodeInserted次のようなものにバインドできます (完全にテストされていません)。

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

autogrow()ポイントは、新しいテキストエリアを呼び出す必要があるということです。

于 2012-05-07T19:01:47.417 に答える
1 
$('.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()
于 2012-05-07T19:05:06.550 に答える
1

私は2つのことをします。まず、プラグインを新しく作成したテキストエリアに適用し、2 つのthis.filter('textarea').each(function() {行をに変更し$(this).each(function() {ます。

jsFiddle の例。

$('.liveText').on('click', function() {
    $('<textarea />').appendTo('#copy').autogrow();
});
于 2012-05-07T19:04:12.847 に答える
0

jQueryでこのメソッドを実行しました。

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

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

試してみてください。scrollHeight の後ろの数を調整して、最良の結果を得ることができます。

于 2014-01-16T12:55:52.560 に答える