2016年7月9日 星期六

HTML form 只有一個 text input 時,在 input 上按 enter 會自動送出表單

HTML 的 form 裡面有 submit 按鈕時,則在裡面其他表單元素按 enter 時,
此時會觸發 submit 按鈕的 onclick 事件、form 的 onsubmit 事件,送出表單。
 (註:若是用 ...form.submit() 方法送出表單,則不會觸發 form 的 onsubmit 事件)
<form method="post" action="test.php" onsubmit="alert('onsubmit');">
AA:<input type="text" name="aa">
BB:<input type="text" name="bb">
<input type="radio" name="cc">CC
<input type="submit" value="送出" onclick="alert('onclick');">
</form>


上例,若是將 type="submit" 按鈕移除,或是換成一般按鈕 type="button",則在表單元素按 enter 也無法送出表單。
但是當 form 裡面的 text input 只有一個時,在 text input 上按 enter 時,也會觸發 form 的 onsubmit 事件,自動送出表單
<form method="post" action="test.php">
AA:<input type="text" name="aa">
<input type="radio" name="cc">CC
</form>


解決方法1:藏一個隱藏的text input (但若form裡面還有個submit按鈕,此方法就不管用了)
<form method="post" action="test.php">
AA:<input type="text" name="aa">
<input type="text" style="display: none">
<input type="radio" name="cc">CC
</form>


解決方法2:在 text input enter 時 return false
<form method="post" action="test.php">
AA:<input type="text" name="aa" onkeypress="if (event.keyCode == 13) {return false;}">
<input type="radio" name="cc">CC
</form>



參考:
javascript - Why do some forms auto-submit on clicking the enter button and others do not? - Stack Overflow
javascript - Why does forms with single input field submit upon pressing enter key in input - Stack Overflow
HTML DOM submit() 方法

沒有留言:

張貼留言