Question

我最近在表单元素中添加了一个CSS3焦点样式（它垂直增长，以便提供更多的写入空间）。但是，现在当用户单击提交按钮时，textarea会失去焦点（并缩小），但表单不会提交，用户必须再次单击“提交”。这有什么解决方案吗？

形式：

<form name="postForm" id="post_form" onsubmit="return validate()" action="post.php" method="post" enctype="multipart/form-data">
    <textarea name="post" onkeydown="update()" onkeyup="update()" placeholder='Write Post...' id="post_area" ></textarea>
    <div id='post_extras'>
        <input class="admin_extra" id="post_button" type="submit" value="Post" />
        <input class="admin_extra" type="file" name="file" />
        <input class="admin_extra" placeholder="Image URL" type="url" name="url" />
        <div class="admin_extra" id='char_left'>5000 Characters Left</div>
    </div>
</form>

CSS：

#post_area{
height: 3em;
width: 100%;
display: block;
border: none;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding: 10px;
margin: 0;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}

#post_area:focus{
    height: 10em;
}

Answer 1

发生这种情况的原因是因为当您将鼠标从文本内容区域中移开时，您将失去对其他元素的关注。这是您必须在发布按钮上单击两次才能激活的原因。一种解决方法是仅在您开始输入文本时使用滑动效果，并在完成发布后使用滑动效果。所以没有滑倒。您可以使用jquery轻松完成此操作。如果你想点击发布 - 你必须手动收听。

您可以使用以下代码执行此操作：

$("post_button").on('click', function(e) {
    e.stopPropagation();
    alert('clicked');
});

JSFiddle 代码：

http://jsfiddle.net/txXaq/1/

HTML单击提交按钮两次

1 个答案: