js 回车提交表单两种实现方法

让我为你详细讲解一下“js 回车提交表单两种实现方法”的完整攻略。

1. 利用form表单的onsubmit事件

我们可以通过在form表单上绑定一个onsubmit事件来实现回车提交表单的功能。下面是一段示例代码：

<form onsubmit="return false;">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登录</button>
</form>

<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单提交默认行为
    const username = form.elements.username.value;
    const password = form.elements.password.value;
    // 处理表单提交的逻辑
  })
</script>

这段代码中我们首先在form表单上绑定了一个onsubmit事件，通过return false;来阻止默认提交行为，然后在JavaScript代码中通过addEventListener方法来监听form表单的submit事件，在事件处理程序中通过event.preventDefault()方法来阻止表单的默认提交行为。之后可以通过form.elements对象获取到表单元素的值，进而处理表单的提交逻辑。

2. 利用键盘事件keydown监听回车按键

我们也可以通过监听键盘事件keydown来实现回车提交表单的功能。下面是一段示例代码：

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登录</button>
</form>

<script>
  const form = document.querySelector('form');
  form.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      const username = form.elements.username.value;
      const password = form.elements.password.value;
      // 处理表单提交的逻辑
    }
  })
</script>

这段代码中我们通过addEventListener方法来监听form表单的keydown事件，然后通过判断按下的键是否是回车键Enter，如果是的话就阻止默认行为，并且处理表单提交的逻辑。

以上是两种实现回车提交表单的方法，选择哪种方法都可以根据自身实际情况和喜好来定。