📌  相关文章
📜  如何使用 jQuery 在 Enter 按钮上提交表单?(1)

📅  最后修改于: 2023-12-03 15:38:04.141000             🧑  作者: Mango

如何使用 jQuery 在 Enter 按钮上提交表单?

通常情况下,表单提交需要点击提交按钮或调用 JavaScript 方法。但是,很多用户喜欢使用 Enter 键来提交表单。在使用 jQuery 的情况下,可以使用 keypress 事件来检测是否按下了 Enter 键,并执行提交表单的操作。

下面是一个实现的示例代码:

<form id="myForm">
  <!-- 表单元素 -->
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码">
  <button type="submit">登录</button>
</form>
$(document).ready(function() {
  // 在表单中按下 Enter 键时,提交表单
  $('#myForm').on('keypress', function(e) {
    if (e.which == 13) {
      // 阻止默认提交行为
      e.preventDefault();
      // 执行表单提交操作
      $(this).submit();
    }
  });
});

上述代码中,keypress 事件会在表单元素上触发。判断按下的键是否为 Enter 键,如果是就执行表单提交操作,并阻止默认的提交行为。

需要注意的一点是,阻止默认提交行为是必须的,否则会出现重复提交表单的现象。

总之,使用 jQuery 在 Enter 按钮上提交表单可以让用户更方便快捷地操作,提高用户体验。