HTML 表单中“return”键的默认行为是什么？ [复制]

Question

我一直认为点击“Return”键的默认行为是提交表单。但它似乎更复杂：如果附近有一个按钮，则“返回”键似乎会模拟该按钮上的“点击”事件，而不是提交表单。这是一个例子：

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> 元素中按回车键时，浏览器会选择单击“麻烦”按钮。但为什么？这里到底发生了什么？我在哪里可以阅读规范？

Answer 1

两个按钮元素都没有类型集。 Type=submit "如果没有为与<form> 关联的按钮指定属性，则为默认值" (MDN Webdocs) 而麻烦的是输入字段之后的下一个。如果您将其类型更改为“按钮”，则“提交”将提交。

同样来自MDN：“请注意，提交事件会在元素本身上触发，而不是在任何元素或元素内部触发。但是，发送以指示表单的提交操作已被触发的 SubmitEvent 包括提交者属性，即触发提交请求的按钮。如果提交不是由某种按钮触发的，则 submitter 的值为 null。（如果没有元素 type=submit 并且在输入中按下 Enter , 表单将提交 event.submitter = null)

逻辑似乎是“找到最接近焦点的具有 type="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>