0

我试图在 jsfiddle 中重新创建我的问题：

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

我有一个文本区域：

在此处输入图像描述

单击它时，它会垂直向下扩展约 7 行。在帮助实现这一点的同一方法中，我还有一些代码可以让 textarea 在输入或删除文本时自动调整大小。

无论如何，如您所见，我有一个相机图标，当单击它时，用户可以立即选择一张照片，该照片将出现在文本区域下方。

如果我选择照片而不单击 textarea 来展开它，然后单击 textarea 来展开它，按住输入 textarea 作品的自动调整大小.. 基本上每次 textarea 展开时将照片向下推。

如果我先展开 textarea 然后选择一张照片，然后按住在 textarea 中输入，则 textarea 的自动调整大小不起作用，而是显示滚动条。如果我单击关闭 textarea（照片中未显示 X 按钮），然后单击 textarea 以再次展开/打开它，然后按住输入 textarea 的自动调整大小再次工作。

似乎 .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);    

    });
});

下面是 textarea 的代码：

$(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。您应该在事件处理change程序之外设置处理程序。click

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

在这里和那里挖掘我的代码后，我发现问题来自我正在使用的自动大小插件。

当我在正在查看我的网站的浏览器中打开和关闭开发人员工具时，会出现滚动条问题。所以这是页面调整大小的问题。

我玩弄文本区域，这完全没问题，但是一旦我打开或关闭开发人员工具，我就会遇到同样的滚动条问题。

于 2012-05-08T20:43:40.700 回答