Prevent users from submitting a form by hitting Enter
I have a survey on a website, and there seems to be some issues with the users hitting enter (I don't know why) and accidentally submitting the survey (form) without clicking the submit button. Is there a way to prevent this?
I'm using HTML, PHP 5.2.9, and jQuery on the survey.
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;
}
});
});
Disallow enter key anywhere
If you don't have a <textarea> in your form, then just add the following to your <form> :
<form ... onkeypress="return event.keyCode != 13;">
Or with jQuery:
$(document).on("keypress", "form", function(event) {
return event.keyCode != 13;
});
This will cause that every key press inside the form will be checked on the keyCode. If it is not 13 (the Enter key), then it will return true and anything will go as expected. If it is 13 (the Enter key), then it will return false and anything will stop immediately, so the form won't be submitted.
The keypress event is preferred over keydown as this is only fired when the character is actually being inserted. The keydown (and keyup ) are fired when any key is pressed, including control keys. And, the keyCode of keypress represents the actual character being inserted, not the physical key used. This way you don't need to explicitly check if Numpad Enter key (108) is pressed too. The keyup is too late to block form submit.
Note that $(window) as suggested in some other answers instead of $(document) doesn't work for keydown / keypress / 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 keypress handler to every individual input element which isn't a <textarea> .
<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...
To reduce boilerplate, this is better to be done with jQuery:
$(document).on("keypress", ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
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("keypress", ":input:not(textarea)", function(event) {
if (event.keyCode == 13) {
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("keypress", ":input:not(textarea):not([type=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.
I had to catch all three events related to pressing keys in order to prevent the form from being submitted:
var preventSubmit = function(event) {
if(event.keyCode == 13) {
log("caught ya!");
event.preventDefault();
//event.stopPropagation();
return false;
}
}
$("#search").keypress(preventSubmit);
$("#search").keydown(preventSubmit);
$("#search").keyup(preventSubmit);
You can combine all the above into a nice compact version:
$('#search').bind('keypress keydown keyup', function(e){
if(e.keyCode == 13) { e.preventDefault(); }
});
上一篇: 如何取消选中单选按钮？
下一篇: 通过点击Enter阻止用户提交表单