Menu
Consider the following HTML:
<form action=""> <input /> <select> <option>A</option> <option>B</option> </select> <input type="submit" /> </form> If the focus is on the input (text box) and I hit enter, the form submits.
But, if the focus is on the select (dropdown box) and I hit enter, nothing happens.
I know I could figure out some JavaScript to override this, but I want to know why hitting enter doesn't just work?
Is there something I would break by capturing the enter with JavaScript (maybe some native keyboard accessibility of the dropdown)?
637
Enter = SubmitIf you have focus in the textbox and hit enter, the form will be submitted automatically. This behavior is consistent across all browsers and is known as implicit submission.
HTML form submit on Enter Key | Example code You don't need to use JavaScript to do submit button or input on entering key pressed. Just need to mark it up with type="submit" , and the other buttons mark them with type="button" .
Use preventDefault() event method to Prevent form submission on the “Enter” key pressed in JavaScript. Enter key keycode is 13, so you can check in if statement.
You can do it using a simple javascript. Here onChange event will be invoked whenever user changes the value in the select box and this. form. submit() method will submit the form.
It's simply the nature of the control. The Enter key (or a mouse click) is what makes the selection. To submit the form when pressing Enter would result in a poor user experience, since the form would essentially be unusable.
I would not recommend changing the behavior via JavaScript, simply because the default behavior is the norm and what everyone will expect.
(Imagine what it would be like if every form submitted when you made a selection in a drop-down list. Consider searching on Amazon.com, for example. One selects a category then enters the search term. If one selected a category by pressing Enter, the form would submit before the search term could be entered.)
157
The select tag is pretty funny. The only thing the Enter key does is once you click the dropdown open and use the arrow keys to select an option you can hit enter to close the dropdown menu.
What boggles my mind is that the W3 spec. does not state what the enter key should do and every browser does it the same way! The browser programmers could have done one of the following.
Enter when focused on a closed dropdown select would:
Open the dropdown so you could key through it while seeing all options.
Would submit the form.
Yet everyone decided to not change it... What is even more amazing is that I have been designing websites for 13 years and it wasn't until today that I noticed this when I got a bug fix from the Business Analysts saying they could not submit the form when they hit enter! Reminds me of the Tiny Pony.
http://www.w3.org/TR/html401/interact/forms.html
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
