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>