博客

如何用jQuery提交表单中的Enter按钮

  • Post category:jquery

当用户在表单中输入完数据后，按下回车键可以触发表单的提交事件，这在用户体验上是非常方便的操作。然而，当表单中有多个输入框时，用户按下回车键时会导致光标移动到下一个输入框，而非提交表单。因此，我们需要在按下回车键时提交表单而非移动光标。

步骤如下：

1. 给表单添加一个ID

为了能够正确地向DOM绑定事件，我们首先需要为表单添加一个唯一的ID。示例：

<form id="my-form">
  <input type="text" name="name">
  <input type="text" name="email">
  <button type="submit">提交</button>
</form>

2. 监听表单的按键事件

接下来，我们需要为表单添加一个键盘按键事件的侦听器。当用户按下回车键时，我们将调用表单的submit()方法以提交表单。示例：

$('#my-form').on('keydown', function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    this.submit();
  }
});

这段代码使用了jQuery的事件绑定方法on()，为表单添加了一个keydown事件侦听器，并判断用户是否按下回车键（keyCode为13）。如果按下回车键，则调用event.preventDefault()，阻止浏览器默认行为（即将光标移动到下一个输入框），然后调用this.submit()以提交表单。

3. 确认表单是否提交成功

最后，我们需要确认表单是否能够成功地提交。这可以通过监听表单的submit事件来判断。示例：

$('#my-form').on('submit', function(event) {
  event.preventDefault();
  // 表单提交成功的代码
});

这段代码使用了jQuery的事件绑定方法on()，绑定了表单的submit事件，并调用event.preventDefault()，阻止浏览器默认行为。在事件处理程序中，我们可以添加代码以确认表单是否提交成功。

完整的示例代码如下：

<form id="my-form">
  <input type="text" name="name">
  <input type="text" name="email">
  <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $('#my-form').on('keydown', function(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      this.submit();
    }
  });

  $('#my-form').on('submit', function(event) {
    event.preventDefault();
    // 表单提交成功的代码
  });
</script>

以上就是使用jQuery提交表单中的Enter按钮的完整攻略。

Tags: