Question

我希望按钮在textarea展开时提交表单。我该怎么做呢？

问题在于，当我单击表单中的“发布”按钮时，虽然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')

    });
})

Answer 1

如果您要提交表单并重定向到另一个页面，您只需要按钮保持长时间以便注册点击，超时解决了这个问题：

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

FIDDLE

如果将此与Ajax一起使用，而不是重定向，并使textarea不响应按钮上的单击，则可以使用变量来跟踪单击的元素，并执行与上面相同的操作： / p>

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

Answer 2

~~我认为它与z-index有关。尝试将position: relative; z-index:1;提供给提交按钮。~~

~~如果您为z-index或其任何祖先设置了textarea，请将该值增加1并将其设置为按钮。~~

~~按钮在增加高度时可能会被textarea重叠。~~ ~~你也提到了while the textarea is expanded it doesnt submit the post。这可能是因为按钮重叠。~~

<强>更新

我在
之后得到了它
问题是，当我单击表单中的“发布”按钮时，虽然textarea已展开，但它不会提交表单，而是会缩小，然后我需要再次单击它，提交表格。

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

Answer 3

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

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

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

textarea使用jquery扩展，而不是在我单击提交按钮时提交表单

3 个答案: