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點擊提交按鈕兩次

回答

相關問題