0

私はjsfiddleで私の問題を再現しようとしました:

http://jsfiddle.net/erU5J/72/

私はテキストエリアを持っています:

ここに画像の説明を入力

クリックすると、垂直方向に約 7 行下に展開されます。これを実現するのに役立つ同じメソッド内に、テキストが入力または削除されたときにテキストエリアのサイズを自動的に変更できるようにするコードもいくつかあります。

とにかく、ご覧のとおり、カメラのアイコンがあり、これをクリックすると、ユーザーはテキスト領域の下に表示される写真をすぐに選択できます。

テキストエリアをクリックせずに写真を選択して拡大すると、テキストエリアをクリックして拡大し、テキストエリアの自動サイズ変更を入力したままにします..基本的に、テキストエリアが拡大するたびに写真を押し下げます。

最初にテキストエリアを展開してから写真を選択すると、テキストエリアに入力したままにすると、テキストエリアの自動サイズ変更が機能せず、代わりにスクロールバーが表示されます。クリックしてテキストエリアを閉じると（写真には表示されていないXボタン）、テキストエリアをクリックして再度展開/開き、テキストエリアの自動サイズ変更を入力したままにします。

.change() は、私が行ったバインディングを気にしていないようです。

画像を選択するための私のコードは次のとおりです。

    $(function() {

    $('div.microposts').on('click', 'li#addImage > span', 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);    

    });
});

テキストエリアのコードは次のとおりです。

$(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"),
            removeAutosizeStyle = function() { 
                micropostForm.parents('html').find('textarea.autosizejs').remove(); 
            };

                removeAutosizeStyle();

                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().autosize();  

                                    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();
                        removeAutosizeStyle();
                    });

    });

});

私のコードが乱雑に見える場合はお詫び申し上げます。

敬具

4

2 に答える 2

2

がクリックchangeされるたびにハンドラーをアタッチします。イベント ハンドラーの外でハンドラーli#addImage > spanを設定する必要があります。changeclick

$(function() {
    $('div.microposts').on('click', 'li#addImage > span', function() {
        var form = $(this).parents('form#new_micropost'),
            fileField = form.find('input#micropost_image');
        fileField.trigger('click');
    });

    $('input#micropost_image').on('change', function(evt) {
        var image = evt.target.files[0]; //[0] first entry of file selected
        if (!image.type.match("image.*")) {
            alert('not an image');
            return;
        }
        var reader = new FileReader();
        reader.onload = function(evt) {
            var resultdata = evt.target.result;
            var img = new Image();
            img.src = evt.target.result;
            $(evt.target).parents('form#new_micropost').find('div.imagePreview').show().prepend(img);
        }
        reader.readAsDataURL(image);
    });
});​

これで、画像が10回回転する問題が解決するはずです。コードを見ずにコメントすることはできません。後者の場合、高さ 260px までリサイズされるようです。

于 2012-05-08T18:22:43.433 に答える
0

私のコードをあちこち掘り下げた後、問題は私が使用している自動サイズプラグインから来ていることがわかりました。

Web サイトを表示しているブラウザーで開発者ツールを開いたり閉じたりすると、スクロール バーの問題が発生します。つまり、ページのサイズ変更の問題です。

テキスト領域をいじってみましたが、まったく問題ありませんが、開発者ツールを開いたり閉じたりするとすぐに、同じスクロール バーの問題が発生します。

于 2012-05-08T20:43:40.700 に答える