在開發網頁時,我們時常會使用 <form> 實作表單,但你是否有發現有些 <form> 按下 enter 不會自動 submit,有些卻會呢?

讓我們來看看 html spec 怎麼定義何時應該觸發 form 的 submit 行為

4.10.22.2 Implicit submission

form element’s default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the “enter” key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

Note: Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)

If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.

https://www.w3.org/TR/2018/SPSD-html5-20180327/forms.html#implicit-submission

讓我們透過範例來摘要以上這段 spec 的幾個重點

  1. 按下 enter 時 submit 如何觸發的?
    當 user 按下 enter 時,會觸發非 disabled 狀態 default buttonclick,接著再觸發 <form>submit

  1. 承上,什麼是 default button
    • <form> 底下的第一個 type="submit" 的 element,以上面例子也就是 login 按鈕
    • 指定對應 form idtype="submit" 的 element,不需要在 <form> 底下 (請見範例)

  1. 如果沒有 default button,而且只有一個的 field<form> 的話會觸發 submit
    這一點可能有點模糊,讓我們再進一步看看 w3c spec 對於這部分更清楚的說明

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2

<form> 底下只有一個 type="text" 的 field 時,按下 enter 應該會觸發 <form> submit 行為

  1. 最後,如果沒有 default button,且有多個 field 的情況下,將必須手動觸發 form.submit()
    例如:如果你想避免 3 的情況,那新增一個 display: none 的 text field,按下 enter 就不會觸發 submit 行為了,但前提是要沒有 default button ⚠️

看了 spec 覺得 <form>submit 行為更了解了一些,雖然平常都是用各種 form library 🙈

參考資料:

Leave a Reply