如何在提交表單之前檢測輸入字段上的 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

Answer 2

您的onsubmit事件優先，因為您不是在監聽keydown事件，而是監聽keyup 。

這應該做你需要的：

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

Answer 3

您不會阻止您的按鈕提交表單，這就是發生這種情況的原因。 默認情況下，當您按 Enter 時，會觸發表單中的按鈕並提交表單。

只需添加這個

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