Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Summary
If you’re developing web applications that will be used continuously by the same group of users, you could speed up their work process significantly by introducing keyboard shortcuts—more so if the application requires text input. (Hence, users won’t have to switch between the keyboard and the mouse.)
All browsers support the keyboard-related events, but unfortunately this class of events is the least standardized aspect of the DOM event model, resulting in various incompatible implementations that best can be addressed with a wrapper library. Due to confusing implementation of the keyboard event object in Opera, the only reliable way of detecting which key was actually pressed is the keycode event property made available in the keydown event handler.
If you want to provide keyboard shortcuts in web pages with input fields, you cannot rely on application functions being triggered by the letters of alphabet, but instead have to base your shortcuts on combinations with the Ctrl or Alt key. Most of these combinations are already used by the browsers themselves, so you have to disable the default processing in the JavaScript code; otherwise, the browser would react to your shortcut as well. Because Opera doesn’t allow the JavaScript event handler to disable Alt character combinations (and Internet Explorer comes close), you should use only the Ctrl character combinations or function keys. But even there, the default browser action cannot be disabled for a few control characters in Internet Explorer.
The event bubbling implemented in all major browsers allows you to implement field-level and document-level keyboard event handlers on the same page, but they shouldn’t act on the same shortcuts, to avoid user confusion.
Keyboard shortcuts are not a widely implemented feature on the web; at the very minimum, you should document the available shortcuts on your web page and optionally allow users to enable or disable them.