4

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 any option.
  • 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.

Non-perfect solutions I've found so far:

  • onclick on each option: Firefox & Internet Explorer: Works for mouse, but not for keyboard. Chrome: Doesn't work at all.
  • onchange on the select: Firefox: Works as expected. Chrome & Internet Explorer: Fires too early when using just the UP/DOWN keys (without expanding the select): 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.html
  • onblur on the select: Firefox & Chrome & Internet Explorer: Fires too late, only when actually leaving the select.
  • onkeydown on the select, plus evaluating the keyCode: 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?

Improve this question
2
  • Changing the default behavior of a select element is likely to be confusing to users. Not sure why you think having an explicit button is ugly. Commented Aug 29, 2015 at 21:24
  • You say the change event on the select violates WCAG: w3.org/TR/2012/NOTE-UNDERSTANDING-WCAG20-20120103/… I DISAGREE: It is totally reasonable to expect users of the user agent (browser) to know how to use that functionality. Therefore, if they are just browsing the options, it is reasonable to expect that they should open the select element using the spacebar first. If this is not the case, then the user agent should be changed such that the arrow key use is interpreted the way users expect it to. Commented Aug 30, 2015 at 15:06

1 Answer 1

Reset to default
2

You could use the onInput event:

The DOM input event is fired synchronously when the value of an <input>, <select>, or <textarea> element is changed.

Right now, Firefox doesn’t support the event on <select> elements, but since onChange works like you want in Firefox, you can pick and choose. (You want an onChange listener for backwards compatibility, anyway.)

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I think you definitely don't want onchange for backwards compatibility... that ruins the effect the question is asking about: when you use onchange against a <select> it fires as soon as you use the keyboard to navigation down one item - you can't effectively pick the item you want before the action fires.
Where possible it's probably better to add a submit button and not trigger events on a select changing... but when you can't modify the design in a major way like that - I found swapping out onchange for oninput works great with modern browsers. Or in jQuery $('#myselect').on('change', doStuff() ) swap to $('#myselect').on('input', doStuff() )

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.