Similar questions have been asked before, but I'm looking for the "opposite" solution than all the others ;-)
I need a JavaScript event that fires when a user decides for an option
in a select
field.
What do I mean by decide:
- Mouse: Click to expand the
select
, then click to select anyoption
. - Keyboard: Either:
- Press the UP/DOWN keys to "scroll" through the options (without expanding the
select
), then press ENTER/TAB to select. Or: - Press ALT+DOWN to expand the
select
, then use the UP/DOWN keys to scroll through the options, and finally press ENTER/TAB to select.
- Press the UP/DOWN keys to "scroll" through the options (without expanding the
Non-perfect solutions I've found so far:
onclick
on eachoption
: Firefox & Internet Explorer: Works for mouse, but not for keyboard. Chrome: Doesn't work at all.onchange
on theselect
: Firefox: Works as expected. Chrome & Internet Explorer: Fires too early when using just the UP/DOWN keys (without expanding theselect
): In the users' mind, they are just scrolling through the available options, not actually selecting anything yet.
Albeit being popular, this approach violates WCAG: http://www.w3.org/TR/2012/NOTE-UNDERSTANDING-WCAG20-20120103/consistent-behavior-unpredictable-change.htmlonblur
on theselect
: Firefox & Chrome & Internet Explorer: Fires too late, only when actually leaving theselect
.onkeydown
on theselect
, plus evaluating thekeyCode
: Looks like a hassle to me, cause there might be (or turn out) other ways to confirm something than pressing the ENTER key (maybe on mobile devices).
The only solution I've found, having perfect accessibility, is ugly:
- Having an explicit
submit
button and binding the event to this.
So (finally) my question is: Do you know any other way to achieve this without the submit
button?