Prevent users from submitting a form by hitting Enter
Disallow enter key anywhere
If you don't have a <textarea>
in your form, then just add the following to your <form>
:
<form ... onkeydown="return event.key != 'Enter';">
Or with jQuery:
$(document).on("keydown", "form", function(event) {
return event.key != "Enter";
});
This will cause that every key press inside the form will be checked on the key
. If it is not Enter
, then it will return true
and anything continue as usual. If it is Enter
, then it will return false
and anything will stop immediately, so the form won't be submitted.
The keydown
event is preferred over keyup
as the keyup
is too late to block form submit. Historically there was also the keypress
, but this is deprecated, as is the KeyboardEvent.keyCode
. You should use KeyboardEvent.key
instead which returns the name of the key being pressed. When Enter
is checked, then this would check 13 (normal enter) as well as 108 (numpad enter).
Note that $(window)
as suggested in some other answers instead of $(document)
doesn't work for keydown
/keyup
in IE<=8, so that's not a good choice if you're like to cover those poor users as well.
Allow enter key on textareas only
If you have a <textarea>
in your form (which of course should accept the Enter key), then add the keydown handler to every individual input element which isn't a <textarea>
.
<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...
To reduce boilerplate, this is better to be done with jQuery:
$(document).on("keydown", ":input:not(textarea)", function(event) {
return event.key != "Enter";
});
If you have other event handler functions attached on those input elements, which you'd also like to invoke on enter key for some reason, then only prevent event's default behavior instead of returning false, so it can properly propagate to other handlers.
$(document).on("keydown", ":input:not(textarea)", function(event) {
if (event.key == "Enter") {
event.preventDefault();
}
});
Allow enter key on textareas and submit buttons only
If you'd like to allow enter key on submit buttons <input|button type="submit">
too, then you can always refine the selector as below.
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
// ...
});
Note that input[type=text]
as suggested in some other answers doesn't cover those HTML5 non-text inputs, so that's not a good selector.
You can use a method such as
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
In reading the comments on the original post, to make it more usable and allow people to press Enter if they have completed all the fields:
function validationFunction() {
$('input').each(function() {
...
}
if(good) {
return true;
}
return false;
}
$(document).ready(function() {
$(window).keydown(function(event){
if( (event.keyCode == 13) && (validationFunction() == false) ) {
event.preventDefault();
return false;
}
});
});