0

我希望按钮在扩展文本区域时提交表单。我该怎么做呢？

问题是当我点击表单中的 Post 按钮时，当 textarea 展开时，它并没有提交表单，而是缩小了，我需要在它变小的时候再次点击它来提交表单。

目前为了提交帖子，我需要在 textarea 未展开时单击帖子按钮。

HTML

<form method='POST' action='elsewhere.php'>
    <textarea id="textarea" style="width:550px; height:25px;"></textarea>
    <input class="btn" type='submit' value='Post'/>                             
</form>

jQuery

目前，当我单击文本区域时，高度会扩大，当我单击其他地方时，它会缩小。当我单击发布按钮时，当 textarea 展开时它不会提交帖子，而是将 textarea 缩小回来。

$('#textarea').click(function(){
    $(this).css('height','100px')
    $(this).html('');
    $(this).blur(function(){
        $(this).css('height','25px')

    });
})
4

3 回答 3

3

If you are submitting the form and redirecting to another page, all you need is for the button to stay still long enogh to register the click, a timeout solves that problem:

$('#textarea').on({
    focus: function() {
        $(this).css('height','100px').html('');
    },
    blur: function() {
        var self = this,
            T = setTimeout(function() {$(self).css('height','25px') }, 200);
    }
});

FIDDLE

If using this with Ajax, and not redirecting, and to make the textarea not respond to the click on the button, you could use a variable to keep track of what element was clicked, and do somewhat the same as above:

var elm;

$('.btn').on('click', function(e) {
    elm = e.target;
    e.preventDefault();
    //do ajax stuff
});

$('#textarea').on({
    focus: function() {
        $(this).css('height','100px').html('');
    },
    blur: function() {
        var self = this,
            T = setTimeout(function() {
                if ($(elm).attr('class') != 'btn') $(self).css('height','25px');
            }, 200);
    }
});

FIDDLE

于 2012-05-13T21:15:07.170 回答
1

我认为这是一些与 z-index 相关的问题。尝试给position: relative; z-index:1;提交按钮。

If you have set z-index for the textarea or any of its ancestors, increment that value by one and set it to the button.

There is a chance of the button being overlapped by the textarea while increasing its height. And you too mentioned that, while the textarea is expanded it doesnt submit the post. It may be because of the button is overlapped.

Update:

I got it after

The problem is that when I click the Post button in the form, while the textarea is expanded, it does not submit the form, instead it shrinks back down, and I need to click it again while it is smaller, to submit the form.

$('#textarea').click(function(){
$(this).css('height','100px')
$(this).html('');
$(this).blur(function(){
    if(this.value === ''){
        $(this).css('height','25px')
    }

});
});
于 2012-05-13T21:12:12.980 回答
0

前几天我遇到了类似的问题，发生的事情是blurtextarea 上的事件发生在浏览器考虑click按钮上的事件之前。

因此，按顺序，我点击了按钮，然后浏览器blur在 textarea 上触发事件，缩小并移动按钮，然后浏览器考虑了点击，什么都不做，因为我点击的地方不再有按钮.

不过，我并没有直接解决这个问题，而是决定只有在 textarea 不为空时才缩小它（this.value == this.defaultValue || this.value == ''在blur事件中添加一些测试）。

于 2012-05-13T21:11:27.933 回答