Developer Checklist — JavaScript Appendices

Incorrect code

JS_N_A4: Do not use the change event of a SELECT element for navigation

This example shows how not to use a <select> element for navigation, by triggering it from the element's change event.

When using a <select> element with the keyboard, the Up and Down arrow keys are used to move through the options. But with this interaction, the change event is fired after every key-press, so if navigation is bound to the change event, it will be impossible to select any option but the first.

Some browsers have implemented their own fixes for this issue — for example, in the latest version of Firefox you have to press Enter to trigger the change event. But this can't be considered sufficient, because it only applies to a minority of browsers.

The correct way to do this is to have a separate GO button, then trigger the change of context from its click event.

Live Demo

Tab to the element below, then use the Down arrow key to move through the options. As soon as the first is selected (in most browsers) a new page will begin to load, making it impossible to select any of the lower options:

Weather and Warnings in your area

JavaScript Code

The JavaScript code for this example can be found in: JS_N_A4.js