此時會觸發 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() 方法
沒有留言:
張貼留言