javascript - 如何在提交表单之前检测输入字段上的 ENTER 键按下情况？

Question

请检查以下代码:

https://codepen.io/tkpop777/pen/vYYVBOe

HTML:

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

JS:

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键，您将收到“表单已提交”警报，而不会收到“回车键”警报。将输入字段移出表单标签会出现“输入键”警报。即使该字段位于表单标签内，我如何才能收到该警报。基本上它应该在表单提交警报之前首先触发。

Answer 1

检查onkeydown而不是onkeyup

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() ，以便随后实际提交表单。

更新的代码笔:https://codepen.io/tkpop777/pen/vYYVBOe