why doesn't hitting enter when a SELECT is foc

问题:

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)?

回答1:

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

回答2:

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:

1. Open the dropdown so you could key through it while seeing all options.

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