HTML 表單中“返回”鍵的默認行為是什么？

Question

我一直認為點擊“返回”鍵的默認行為是提交表單。 但它似乎更復雜：如果附近有一個按鈕，則“返回”鍵似乎模擬該按鈕上的“單擊”事件，而不是提交表單。 下面是一個例子：

 document.querySelector('form').onsubmit = ev => { ev.preventDefault(); document.querySelector('#result').innerText = ev.target.elements.text.value; }; document.querySelector('#troublesome').onclick = ev => { ev.preventDefault(); ev.target.innerText = Math.random(); };

 <form> <input type="text" name='text' value='something' /> <button id="troublesome">Trouble</button> <button>Submit</button> </form> <div id="result">not submitted</div>

上面，當您在<input>元素中點擊 return 時，瀏覽器會選擇單擊“麻煩”按鈕。 但為什么？ 這里到底發生了什么？ 我在哪里可以在規范中閱讀它？

Answer 1

兩個按鈕元素都沒有設置類型。 如果沒有為與<form>關聯的按鈕指定屬性，則 Type=submit “是默認值”（ MDN Webdocs ）並且麻煩的是輸入字段之后的下一個。 如果您將其類型更改為“按鈕”，則“提交”將提交。

同樣來自MDN ：“請注意，提交事件在元素本身上觸發，而不是在任何元素或元素內部觸發。但是，發送以指示表單的提交操作已被觸發的 SubmitEvent 包括一個提交者屬性，它是觸發提交請求的按鈕。如果提交不是由某種按鈕觸發的，則提交者的值為空。（如果輸入中沒有元素 type=submit 並按下 Enter，則表單將提交與 event.submitter = null)

邏輯似乎是“找到最接近焦點的具有 type="submit" 的按鈕，並在該按鈕上模擬單擊事件，否則回退到僅提交表單”（在某處沒有明確找到）在您的示例 'troublesome' 的類型是 'submit' 並且最接近輸入，如果沒有 'prevent.default()'，兩個事件都會被觸發。

 document.querySelector('form').onsubmit = ev => { ev.preventDefault(); document.querySelector('#result').innerText = ev.target.elements.text.value; }; document.querySelector('#troublesome').onclick = ev => { ev.preventDefault(); ev.target.innerText = Math.random(); };

 <form> <input type="text" name='text' value='something' /> <button type="button" id="troublesome">Trouble</button> <button>Submit</button> </form> <div id="result">not submitted</div>