JavaScript 如何防止用户通过按Enter键提交表单

在本文中，我们将看到如何在JavaScript中防止用户通过按Enter键提交表单。大多数情况下，我们需要填写不同类型的表单并提交它们。在提交表单时，我们要么按下ENTER键，要么按下屏幕上显示的SUBMIT按钮。如果我们必须制作一个自定义表单，只能通过SUBMIT按钮提交表单，那么将使用以下方法。

方法1： 使用 onkeydown 事件属性

onkeydown 事件属性是一个HTML属性，用于指定当用户在键盘上按下键时，网页的行为。该属性可以应用于各种HTML元素，例如、和，用于指定一个将在按键按下时执行的JavaScript函数。onkeydown事件属性可用于在网页中实现基于键盘的各种交互，如键盘快捷方式、自动完成和导航。

语法：

<form id="form-id" onkeydown="if(event.keyCode === 13) {
    alert('You have pressed Enter key, use submit button instead'); 
    return false;
}">

示例1： 在这个示例中，将 onkeydown 事件添加到每个输入字段中，以检查按下的键的 keyCode 是否不等于 13（Enter 键）。如果不是 Enter，用户可以继续输入。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Disable form submission on pressing enter key 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <form id="form-id" onkeydown="if(event.keyCode === 13) { 
                alert( 
    'You have pressed Enter key, use submit button instead');  
                return false; 
          }"> 
        <label>First name:</label> 
        <input type="text" name="first-name" /> 
        <div><br /> 
            <label>Last name:</label> 
            <input type="text" name="last-name" /> 
        </div><br /> 
        <input type="submit" value="Submit" /> 
    </form> 
</body> 
  
</html>

输出：

JavaScript 如何防止用户通过按Enter键提交表单

方法2：使用 onkeypress 事件和 preventDefault() 事件方法

onkeypress 事件用于每当用户按下键盘键时调用该事件。preventDefault() 方法用于阻止浏览器执行所选元素的默认操作。它可以阻止用户通过点击链接来处理请求。

示例2： 此示例演示了如何通过实现 onkeypress 事件和 preventDefault() 方法，阻止用户通过按下 Enter 键提交表单。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to prevent the users from  
        submitting a form by hitting Enter? 
      </title> 
</head> 
  
<body> 
    <h1 style="text-align: center;  
               color: green;"> 
        GeeksforGeeks 
    </h1> 
    <form style="text-align: center;"
          id="gfg"> 
        <label for="name" 
               style="display: block;  
                      margin-bottom: 10px;"> 
            Name: 
        </label> 
        <input type="text" 
               name="name" 
               id="name" required  
               style="padding: 5px;  
                      border-radius: 5px;  
                      border: 1px solid #ccc;  
                      margin-bottom: 10px;"> 
  
        <label for="class" 
               style="display: block;  
                      margin-bottom: 10px;"> 
            Class: 
        </label> 
        <input type="text" 
               name="class" 
               id="class" required  
               style="padding: 5px;  
                      border-radius: 5px;  
                      border: 1px solid #ccc;  
                      margin-bottom: 10px;"> 
  
        <label for="date" 
               style="display:block;  
                      margin-bottom: 10px;"> 
            Enter a date: 
        </label> 
        <input type="date" 
               name="date" 
               id="date" required  
               style="padding: 5px;  
                      border-radius: 5px;  
                      border: 1px solid #ccc;  
                      margin-bottom: 10px;"> 
  
        <input type="submit" 
               value="Submit" 
               id="btn" 
               style="background-color: green;  
                      color: #fff;  
                      padding: 10px 20px;  
                      border-radius: 5px; border: none;  
                      cursor: pointer;"> 
    </form> 
  
    <script> 
        let val = document.getElementById("gfg"); 
        val.onkeypress = function (key) { 
            var btn = 0 || key.keyCode || key.charCode; 
            if (btn == 13) { 
                alert("Enter Key is Pressed!"); 
                key.preventDefault(); 
            } 
        }  
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何防止用户通过按Enter键提交表单