Skip to main content
Update as per current state of technology.
Source Link
BalusC
  • 1.1m
  • 377
  • 3.7k
  • 3.6k
<form ... onkeypress="returnonkeydown="return event.keyCodekey != 13;">'Enter';"> 
$(document).on("keypress""keydown", "form", function(event) { return event.keyCodekey != 13;"Enter"; }); 

This will cause that every key press inside the form will be checked on the keyCodekey. If it is not 13 (the Enter key)Enter, then it will return truetrue and anything will gocontinue as expectedusual. If it is 13 (the Enter key)Enter, then it will return falsefalse and anything will stop immediately, so the form won't be submitted.

The keypresskeydown event is preferred over keydownkeyup 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 keystoo late to block form submit. AndHistorically there was also the keypress, but this is deprecated, as is the keyCode ofKeyboardEvent.keyCode. You should use keypress representsKeyboardEvent.key instead which returns the actual character being inserted, notname of the physical key used. This way you don't need to explicitly check if Numpad Enter key (108) isbeing pressed too. TheWhen keyupEnter is too late to block form submitchecked, 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/keypress/keyup in IE<=8, so that's not a good choice if you're like to cover those poor users as well.

If you have a <textarea> in your form (which of course should accept the Enter key), then add the keypresskeydown handler to every individual input element which isn't a <textarea>.

<input ... onkeypress="returnonkeydown="return event.keyCodekey != 13;">'Enter';"> <select ... onkeypress="returnonkeydown="return event.keyCodekey != 13;">'Enter';"> ... 
$(document).on("keypress""keydown", ":input:not(textarea)", function(event) { return event.keyCodekey != 13;"Enter"; }); 
$(document).on("keypress""keydown", ":input:not(textarea)", function(event) { if (event.keyCodekey == 13"Enter") { event.preventDefault(); } }); 
$(document).on("keypress""keydown", ":input:not(textarea):not(:submit)", function(event) { // ... }); 
<form ... onkeypress="return event.keyCode != 13;"> 
$(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.

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;"> ... 
$(document).on("keypress", ":input:not(textarea)", function(event) { return event.keyCode != 13; }); 
$(document).on("keypress", ":input:not(textarea)", function(event) { if (event.keyCode == 13) { event.preventDefault(); } }); 
$(document).on("keypress", ":input:not(textarea):not(:submit)", function(event) { // ... }); 
<form ... onkeydown="return event.key != 'Enter';"> 
$(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.

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';"> ... 
$(document).on("keydown", ":input:not(textarea)", function(event) { return event.key != "Enter"; }); 
$(document).on("keydown", ":input:not(textarea)", function(event) { if (event.key == "Enter") { event.preventDefault(); } }); 
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) { // ... }); 
deleted 6 characters in body
Source Link
BalusC
  • 1.1m
  • 377
  • 3.7k
  • 3.6k

##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]: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.

##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.

##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(: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.

window vs document
Source Link
BalusC
  • 1.1m
  • 377
  • 3.7k
  • 3.6k

##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 bestbetter 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.

##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.

##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>. To reduce boilerplate, this is best 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.

##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.

Improved.
Source Link
BalusC
  • 1.1m
  • 377
  • 3.7k
  • 3.6k
Loading
added 116 characters in body
Source Link
BalusC
  • 1.1m
  • 377
  • 3.7k
  • 3.6k
Loading
Improved.
Source Link
BalusC
  • 1.1m
  • 377
  • 3.7k
  • 3.6k
Loading
added 5 characters in body
Source Link
BalusC
  • 1.1m
  • 377
  • 3.7k
  • 3.6k
Loading
Source Link
BalusC
  • 1.1m
  • 377
  • 3.7k
  • 3.6k
Loading