「If you have focus in the textbox and hit enter, the form will be submitted automatically. This behavior is consistent across all browsers and is known as implicit submission.」
日前在搜尋資料時，正好看到了某篇部落格文章。
是說在文字框 ( TextBox ) 按下 Enter 後，表單 ( Form ) 就會自動被送出，且會觸發 form 的第一顆按鈕 Click 事件。
以往沒遇過這樣的需求，也沒遇過這樣的問題。研究了一下作為紀錄。
隱式提交 ( Implicit submission )
直接切入主題，當網頁的焦點 ( Focus ) 在輸入框中並按下 Enter 鍵，此時其所屬的 Form 會自動被提交。
經搜尋，此為 Html Standard 4.10.21.2, Implictit submission，稱為隱式提交，此行為在各瀏覽器中幾乎一致通用。
觸發情境
1. form 具有提交按鈕 ( submit button )
2. form 僅有一個輸入元件 ( input )
Html Standard 4.10.21.2
關於 Html Standard 4.10.21.2 的說明，可參閱此處
基本包含幾項重點如下
1. 某些 Web 網頁僅有在支援隱式提交時才可使用，因此強烈建議 user agents ( 以下都簡單稱瀏覽器 ) 支持此點。
2. Form 的預設按鈕是，桉樹狀排序的第一個提交按鈕。
3. 如果瀏覽器支援使用者隱式提交表單，同時該表單預設按鈕非禁用 ( disabled ) ，此時瀏覽器觸發預設按鈕的 Click 事件。
4. 在沒有提交按鈕的狀況，如有一個以上的欄位 ( Field ) ，則隱式提交機制什麼都不做；否則必須提交表單本身。
5. 依上點，一個以上的欄位 ( Field ) 會阻止隱式提交表單，且 type 屬性是以下其中之一 : Text、Search、URL、Telephone、Email、Password、Date、Month、Week、Time、Local Date and Time, Number。
測試情境
以下的 input 皆以 Text 為例。實際的情境會有許多情形，此處就僅列出幾個常見與特別的範例供大家參考~
No Button
未包含任何 button，三個區域分別為 : 一個在 form 裡面的 input，另一個則否，以及多個 input ，以上三種情境。
前者 Enter 後表單被提交；後兩者 Enter 皆無反應。
Single Button
三個區域中皆有複數個 Input 欄位，分別為沒有 button 、Button Type 及 Submit Type
僅有最後者 Enter 會觸發隱式提交
Multiple Button
表單中有多個 input ，前者為一個 Submit Button 與 多個 Button ，後者為多個 Submit Button
則多個 Submit Button 的情境下，仍會觸發隱式提交
About Button Event
替頁面的 button 都註冊彈窗事件
前者按鈕 type 為 button ，任意輸入內容後在文字框 enter ，不會觸發按鈕事件，表單直接被送出
後者按鈕 type 為 submit ，則會先執行按鈕事件才送出表單 ( 如果在按鈕事件設定 return false; 則該表單不會被送出 )
結語
研究的過程，也看到不少討論關於，要怎麼移除隱式提交，而這關係到使用者習慣與開發者所使用的技術。
現在經手的專案，很多都採用 ajax ( 非同步技術 )，
使用 form 越來越少，甚至有些人可能完全不會碰到，也因此更不會接觸到這些基本概念。
此篇以介紹隱式提交為主，若欲找方法移除者可參考 keydown Function 與 event.keyCode
再進階則與 Bubbling 、preventDefault() ( 停止事件的默認動作 ) 相關
則又牽扯到其他概念，所以此處暫先不詳細列出，後面若有時間再另開篇幅說明~
參考資料
- https://blog.darkthread.net/blog/enter-on-form/
- https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/
- https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission
- https://stackoverflow.com/questions/57064691/is-implicit-submission-submit-on-enter-key-useful-to-people-using-readers-and
- https://www.stefanjudis.com/today-i-learned/implicit-form-submission-doesnt-work-always/
- https://www.tutorialspoint.com/javascript-submit-textbox-on-pressing-enter
- https://xyz.cinc.biz/2016/07/form-input-enter-auto-submit.html
留言列表
{{ article.title }}