In this article, we will see how to prevent users from submitting a form by hitting Enter button in JavaScript. Most of the time, we are required to fill out forms of different types and submit them. While submitting a form, either we press the ENTER key or press the SUBMIT button displayed on the screen. If we have to make a customized form where we can only submit the form via SUBMIT button then, the following approach will be used.
Approach 1: Using the ‘Onkeydown’ Event attribute
The onkeydown event attribute is an HTML attribute that is used to specify the behavior of a web page when a user presses a key on their keyboard. This attribute can be applied to various HTML elements, such as <input>, <textarea>, and <body>, to specify a JavaScript function that will be executed when a key is pressed down. The onkeydown event attribute can be useful for implementing various keyboard-based interactions in web pages, such as keyboard shortcuts, autocomplete, and navigation.
Syntax:
<form id="form-id" onkeydown="if(event.keyCode === 13) {
alert('You have pressed Enter key, use submit button instead');
return false;
}">
Example 1: In this example, the onkeydown event is added to each of the input fields to check if the keyCode of the pressed key is not equal to 13 (Enter key). If it’s not Enter, the user can continue typing.
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>neveropen</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> |
Output:
Approach 2: Using the onkeypress Event & preventDefault() Event Method
The onkeypress event is used so that whenever the user presses the key, this event will be called. The preventDefault() method is also used to prevent the browser from executing the default action of the selected element. It can prevent the user from processing the request by clicking the link.
Example 2: This example illustrates preventing the user from submitting a form by hitting Enter Key button by implementing the onkeypress event & the preventDefault() method.
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;"> neveropen </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> |
Output:
