jQuery 如何禁用回车按钮提交表单

在本文中，我们将学习如何使用jQuery以及其元素选择器功能和“keypress”事件监听器来禁用按下回车按钮时的表单提交行为。

在某些输入字段需要进行验证的情况下，禁用表单提交是非常有用的。例如，一个需要填写姓名和电子邮件的表单在这些必填字段没有提供值之前，理论上是不应该启用提交按钮的。在这种情况下，我们可以动态禁用表单提交以实现所需的结果。

在这里，我们将仅在用户按下回车键提交表单时禁用表单提交流程。我们将在表单上放置一个“keypress”事件监听器，并检测按下的键是否为回车键。如果是，我们将从表单提交流程中返回false。

让我们通过一些示例来理解这个过程−

示例1

在这个例子中，我们将创建一个包含电子邮件、名字和姓氏等不同输入字段的表单，并在表单上放置一个“keypress”事件监听器以检测回车键并禁用表单提交。

文件名：index.html

<html lang="en">
   <head>
      <title>How to disable form submit on enter button using jQuery?</title>
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"
         integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
         crossorigin="anonymous"></script>  
   </head>
   <body>
      <h3>How to disable form submit on enter button using jQuery?</h3>

      <form id="myForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
         <input type="email" name="email" placeholder="Enter your email">
         <input type="text" name="firstName" placeholder="Enter your first name">
         <input type="text" name="lastName" placeholder="Enter your last name">
         <input type="submit" name="submit" value="Submit">
      </form>

      <script>
          $(document).ready(function(){$ ('#myForm').keydown(function(event){
            if(event.keyCode == 13) {
               alert('You pressed enter! Form submission will be disabled.')
               event.preventDefault();
               return false;
               }
            });
         });
      </script>
   </body>
</html>

示例2

在这个例子中，我们将创建一个带有邮箱和密码字段的登录表单，并且在输入回车键时禁用表单提交，直到两个字段都填写完整。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable form submit on enter button using jQuery?</title>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>  
</head>
<body>
   <h3>How to disable form submit on enter button using jQuery?</h3>

   <form id="loginForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
       <input type="email" name="email" placeholder="Enter your email">
       <input type="password" name="password" placeholder="Enter your password">
       <input type="submit" name="submit" value="Login" disabled>
    </form>

    <script>
         $(document).ready(function(){$ ('#loginForm input').on('keyup', function(){
               if( $('#loginForm input[name="email"]').val() !== '' &&$ ('#loginForm input[name="password"]').val() !== '') {
                   $('#loginForm input[name="submit"]').prop('disabled', false); } else {$ ('#loginForm input[name="submit"]').prop('disabled', true);
              }
           });

            $('#loginForm').keydown(function(event){ if(event.keyCode == 13 && ($ ('#loginForm input[name="email"]').val() === '' || $('#loginForm input[name="password"]').val() === '')) {
                  alert('Please fill out both email and password fields to login.')
                 event.preventDefault();
               return false;
               }
           });
        });
    </script>
</body>
</html>

示例3

在这个示例中，我们使用3种不同的方法禁用了表单在按下回车键时的提交行为。在第一种方法中，我们捕获了keypress事件，并检查按下的键。在第二种方法中，当输入框获得焦点时，我们禁用了表单的提交。在第三种方法中，我们使用onkeydown属性来捕获keydown事件。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable form submit on enter button using jQuery?</title>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
   <h3>How to disable form submit on enter button using jQuery?</h3>

   <form id="loginForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
      <input type="email" name="email" placeholder="Enter your email">
      <input type="password" name="password" placeholder="Enter your password">
      <input type="submit" name="submit" value="Login">
   </form>

   <script>
       $(document).ready(function() { // Method 1: Capture Keypress Event and Check for Enter Key$ ('#loginForm').keypress(function(event) {
            if (event.which === 13 && ( $('#loginForm input[name="email"]').val() === '' ||$ ('#loginForm input[name="password"]').val() === '')) {
               alert('Please fill out both email and password fields to login.');
               event.preventDefault();
               return false;
            }
         });

         // Method 2: Disable Submit Button on Input Focus
             $('#loginForm input[name="email"], #loginForm input[name="password"]').focus(function() {$ ('#loginForm input[name="submit"]').prop('disabled', true);
            });

          $('#loginForm input[name="email"], #loginForm input[name="password"]').blur(function() { if ($ ('#loginForm input[name="email"]').val() !== '' &&  $('#loginForm input[name="password"]').val() !== '') {$ ('#loginForm input[name="submit"]').prop('disabled', false);
            }
         });

        // Method 3: Use onkeydown attribute
        $('#loginForm input[name="email"], #loginForm  input[name="password"]').on('keydown', function(event) {
            if (event.keyCode === 13) {
               event.preventDefault();
            return false;
            }
         });
      });
   </script>
</body>
</html>