2

テキストエリアを垂直方向に自動的に拡張するのに苦労しています。

textarea を垂直方向に自動展開するのに役立つコードがいくつかありますが、何らかの理由で、すべての JS を消去し、textarea への参照を含むセレクターを提供すると機能し$('textarea').autoGrow()ます。

メソッドのチェーンでプラグインを呼び出すと、プラグインが機能しなくなります。例えば

micropostBox.hide().removeClass("micropost_content")
.addClass("micropost_content_expanded").show().autoGrow();

プラグイン コードが機能することを確認したので、すべての作業コードを同じページにコピーし、autoGrowコードを適用しtextareaましたが、応答しないようです。コードを使用しているプラ​​グインが bind および unbind メソッドを使用していることに気付きました。私のコードでは、on と off のメソッドを使用してJQueryいtextareaます。

コードは次のとおりです。 http://jsfiddle.net/erU5J/101/

autogrow プラグイン js コード

$(function($) {
    $.fn.autoGrow = function() {
        return this.each(function() {
            var txtArea = $(this);
            var colsDefault = txtArea.attr('cols');
            var rowsDefault = txtArea.attr('rows');

            var updateSize = function() {
                var linesCount = 0;
                var lines = txtArea.attr('value').split('\n');

                for (var i = lines.length - 1; i >= 0; --i) {
                    linesCount += Math.floor((lines[i].length / colsDefault) + 1);
                }

                if (linesCount >= rowsDefault) {
                    txtArea.attr('rows', linesCount + 1);
                }
                else {
                    txtArea.attr('rows', rowsDefault);
                }
            };
            txtArea.unbind('.autoGrow').bind('keyup.autoGrow', updateSize).bind('keydown.autoGrow', updateSize).bind('change.autoGrow', updateSize);
        });
    };
});

私のjsコード

$(function() {

    $("div.microposts").on("focus", "textarea#micropostBox", function() {

        var micropostForm = $(this).parent(),
            micropostBox = micropostForm.find('textarea#micropostBox'),
            micropostButton = micropostForm.find("input#micropostButton"),
            xButton = micropostForm.find("div.xButton");


        micropostBox.prop('rows', 7);
        micropostForm.find('div#micropostOptions').removeClass('micropostExtraOptions');
        micropostForm.find('div#postOptions').show();
        $.trim(micropostBox.val()) == '' ? micropostButton.addClass("disabledMicropostButton").show()

        :

        micropostButton.prop('disabled', false);

        micropostBox.hide().removeClass("micropost_content").addClass("micropost_content_expanded").show().autoGrow();

        xButton.show();
        micropostButton.prop('disabled', true);


        micropostBox.off().on("keypress input change", function() {

            micropostButton.prop({
                disabled: !$.trim($(this).val()) != ''
            });

            $.trim($(this).val()) != '' ? micropostButton.removeClass("disabledMicropostButton").addClass("activeMicropostButton")

            :

            micropostButton.removeClass("activeMicropostButton").addClass("disabledMicropostButton");

        });

        xButton.on('click', function() {

            micropostBox.removeClass("micropost_content_expanded").addClass("micropost_content");
            micropostForm.find('div#micropostOptions').addClass('micropostExtraOptions');
            micropostBox.val("");
            micropostForm.find('div#postOptions').hide();
            xButton.hide();
            micropostButton.hide();
            micropostBox.removeAttr('style');
            micropostBox.prop('rows', 0);
            micropostForm.find('.imagePreview > img').remove();
            micropostForm.find('.imagePreview').hide();

        });

    });

});





$(function() {

    $('div.microposts').on('click', 'li#addImage', function() {

        var form = $(this).parents('form#new_micropost'),
            fileField = form.find('input#micropost_image');

        fileField.trigger('click');
    });

});

$(function() {

    $('input#micropost_image').change(function(evt) { //.off() make sautoresize work
        var image = evt.target.files[0],
            form = $(this).parents('form#new_micropost'),
            imagePreviewBox = form.find('div.imagePreview'),
            reader = new FileReader();

        reader.onload = function(evt) {
            var resultdata = evt.target.result,
                img = new Image();

            img.src = evt.target.result;
            imagePreviewBox.show().prepend(img);

        };

        reader.readAsDataURL(image);

    });
});​

テキストエリア

 <textarea class="micropost_content" cols="40" id="micropostBox" name="micropost[content]" placeholder="" rows="0"></textarea>

jsfiddle で実際の例を表示することをお勧めします。私の目的は、テキストエリアの画像アップロードボタンを使用してページに画像を追加する前後に、テキストエリアの自動サイズ変更を機能させることです。

敬具

4

2 に答える 2

3

プラグイン呼び出しの前のメソッドが、プラグインをアタッチする必要がある要素を含む jQuery オブジェクトを返したかどうかによって異なります。

以下に、最初に使用した要素を返すメソッドと返さないメソッドの例をいくつか示します。

$('element')           //get an element
    .contents()        //get an elements contents
    .wrapAll('<div>')  //wrapAll contents with div and returns the contents, not wrapper
    .parent()          //the wrapper
    .parent()          //the element
    .myPlugin()        //we attach a plugin to element

$('<div>')
    .appendTo('body')  //appendTo returns the same element, the div
    .myPlugin()        //attaches to the div

$('element')           //get an element
    .text()            //get its text
    .myPlugin()        //chaining isn't possible since text() returns a string

jQueryのすべてのメソッドとそれが返すもののドキュメントをよく読んでください。通常、同じ要素を返す DOM メソッドもあれば、返さないものもあれば、要素を返さずに値を返すものもあります。

要約すると、チェーンの後にプラグインをアタッチできますか? はい、場合によります。

于 2012-05-09T11:24:09.423 に答える
0

jQueryのドキュメントを参照してください

http://docs.jquery.com/Plugins/Authoring#Maintaining_Chainability

于 2012-05-09T11:32:55.200 に答える