3

我最近为表单元素添加了 CSS3 焦点样式（它垂直增长以提供更多书写空间）。但是，现在当用户单击提交按钮时，文本区域失去焦点（并缩小），但表单没有提交，用户必须再次单击提交。有什么解决办法吗？

形式：

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

1 回答 1

0

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

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

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

JSFiddle代码：

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

于 2012-07-28T08:41:15.367 回答