Javascript 在提交表单之前，如何检测输入字段上的ENTER键？

请检查以下代码：

HTML:

<form>
  <input type="text" value="text field 1" />
  <br />
  <input type="text" value="text field 2" id="textfield2" />  
  <br />
  <button>Submit</button>
</form>

document.querySelector('#textfield2').onkeyup = (e) => {
  e.preventDefault();
  if (e.keyCode == 13) {
    alert('enter key')
  }
}

document.querySelector('form').onsubmit = (e) => {
  e.preventDefault();
  alert('form submitted');
}

---

如果您在第二个输入字段中并按ENTER键，您将收到“表单已提交”警报，而不会收到“ENTER键”警报。将输入字段移出表单标记会发出“回车键”警报。即使该字段位于表单标记中，我如何接收该警报。基本上，它应该在表单提交警报之前首先触发。

您的

onsubmit

事件优先，因为您正在侦听的不是

keydown

事件，而是

keydup

这应该满足您的需要：

document.querySelector('#textfield2').onkeydown = (e) => {
  e.preventDefault();
  if (e.keyCode == 13) {
    alert('enter key')
  }
}

---

选择

onkeydown

而不是

onkeydup

document.querySelector('#textfield2').onkeydown = (e) => {
  if (e.keyCode == 13) {
    alert('enter key')
  }
}

document.querySelector('form').onsubmit = (e) => {
  e.preventDefault();
  alert('form submitted');
}

注意：我还从

onkeydown

事件中删除了

e.preventDefault（）

，因此表单实际上是在之后提交的

---

更新的代码笔：

您不会阻止按钮提交表单，这就是为什么会发生这种情况。默认情况下，当您按enter键时，将触发表单中的按钮并提交表单

再加上这个

document.querySelector('button').onclick = (e) => {
  e.preventDefault();
}