01-HTML5 form 按 Enter 的執行送出表單
在 HTML5 的 <form action=""></form> 的元素裡面，如果有 submit 按鈕時，裡面其他表單元素按 enter 時，此時會觸發 submit 按鈕的 onclick 事件、form 的 onsubmit 事件，送出表單。註：若是用 …form.submit() 方法送出表單，則不會觸發 form 的 onsubmit 事件
See the Pen HTML5 預設 submit 行為 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
01-JavaScript 與 jQuery 解法
JavaScript 常見的事件句柄（Event Handlers）
| 屬性名 | 描述(對應事件發生在何時…) | 屬性名 | 描述(對應事件發生在何時…) |
|---|---|---|---|
| onabort | 圖像的加載被中斷 | onblur | 元素失去焦點 |
| onchange | 域的內容被改變 | onclick | 當用戶點擊某個對象時調用的事件名柄 |
| ondblclick | 當用戶雙擊某個對象時調用的事件句柄 | onerror | 在加載文檔或圖像時發生錯誤 |
| onfocus | 元素獲得焦點 | onkeydown | 某個鍵盤按鍵被按下 |
| onkeypress | 某個鍵盤按鍵被按下並鬆開 | onkeyup | 某個鍵盤按鍵被鬆開 |
| onload | 一張頁面或一幅圖像完成加載 | onmousemove | 鼠標按鈕被按下 |
| onmousemove | 鼠標被移動 | onmouseout | 鼠標從某個元素移開 |
| onmouseover | 鼠標移動到某元素之上 | onmouseup | 鼠標銨鍵被鬆開 |
| onreset | 重置按鈕被點擊 | onresize | 窗口或框架被重新調整大小 |
| onselect | 文本被選中 | onsubmit | 確認按鈕被點擊 |
| onunload | 用戶退出頁面 |
1 2 3 4 5 6 7 8 | $('.input').keypress(function(e) { code = e.keyCode ? e.keyCode : e.which; // in case of browser compatibility if(code == 13) { e.preventDefault(); // do something /* also can use return false; instead. */ } }); |
02-HTML 的解法
1 2 3 4 5 6 | <form action="www.baidu.com" method="post" onkeydown="if(event.keyCode==13){return false;}"> <input type="text" value="" /> <input type="text" value="" /> <button>提交</button> <!-- 或在對應input上添加，同時建議取消自動填充，因為mac下會有問題<input type="text" value="" autocomplete="off" onkeydown="if(event.keyCode==13){return false;}" /> --> </form> |
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- 解決方法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> |
Comments are closed.