HTML点击提交按钮两次

我最近添加了一个CSS3焦点样式到一个表单的元素（它垂直增长，给更多的空间来写）。然而，现在当用户点击提交按钮时，textarea会失去焦点（和缩小），但表单不会提交，用户必须再次点击提交。有没有解决这个问题的方法？HTML点击提交按钮两次

形式：

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

来源

2012-07-28 J3RN

你能在这里发表您更新代码？ – 2012-07-28 07:56:15

之所以出现这种情况是因为当你从文本内容区域离开鼠标你就失去了重心上的其他元素。这是您必须点击发布按钮两次才能激活的原因。一种解决方法是只有当您开始输入文本时才使用滑动效果，并且一旦完成后发布即可。所以没有回落。你可以用jquery轻松做到这一点。如果你想发布点击 - 你必须手动收听。

您可以用下面的代码做到这一点：

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

的jsfiddle代码：

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

来源

2012-07-28 08:41:15

HTML点击提交按钮两次

回答

相关问题