文本区域使用 jQuery 展开，当我单击提交按钮时不会提交表单

textarea expanded with jquery, not submitting the form when i click the submit button

本文关键字：提交 按钮 单击 表单 区域 jQuery 展开 文本      更新时间：2023-09-26

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

问题是，当我单击表单

中的"发布"按钮时，当文本区域展开时，它不会提交表单，而是缩小，我需要在它较小时再次单击它以提交表单。

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

.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').click(function(){
    $(this).css('height','100px')
    $(this).html('');
    $(this).blur(function(){
        $(this).css('height','25px')
    });
})

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

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

小提琴

如果将其与 Ajax 一起使用，而不是重定向，并且为了使文本区域不响应按钮的单击，您可以使用变量来跟踪单击的元素，并执行与上述相同的操作：

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

小提琴

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

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

按钮有可能在增加其高度时被文本区域重叠。 你也提到了这一点，while the textarea is expanded it doesnt submit the post.可能是因为按钮重叠。

更新：

我得到了它之后

问题是，当我单击表单

中的"发布"按钮时，当文本区域展开时，它不会提交表单，而是缩小，我需要在它较小时再次单击它以提交表单。

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

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

因此，为了，我点击按钮，然后浏览器在文本区域上触发blur事件，缩小它并移动按钮，然后浏览器考虑了点击，什么也不做，因为不再有一个按钮我点击。

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

相关文章：