Learn Javascript

Keyboard Events

Introduction

Not everyone uses a mouse to interact with web pages. Some people use their keyboard instead. There are a number of Javascript event handlers that we can use to trigger processing when various keyboard actions are performed. You may even want (or need) to combine some of these with the mouse event handlers we looked at in the last tutorial in order to cater for both means of interacting with the page.

Onfocus and Onblur

The focus and blur events are triggered when a particular object on your page gains or loses the focus. Just as you can have multiple windows open on your screen and the one you are working in has the focus, each level of objects within your web page will similarly have one that has the focus. The browser provides a means of moving the focus from one object in the page to another using either the keyboard or (in some cases) the mouse. When the focus is moved from one object to another the onblur event will be triggered for the object losing the focus and the onfocus event will be triggered for the object gaining the focus.

These two events can also often be used in place of onmousedown and onmouseup to allow the processing to be triggered from the keyboard as well as from a mouse click.

See how these event handler works for yourself, the following links will execute alerts when the appropriate event handlers are triggered: onfocus onblur

Note that the standards actually say that these two events only apply to form fields however most browsers have implemented onfocus for most web page objects. Support for onblur is somewhat more limited but still extends beyond just form fields in most browsers.

>

Onkeydown and Onkeyup

The onkeydown and onkeyup events are triggered when your visitors presses a key on their keyboard and they acts on the object on your web page that currently has the focus. As their name sugges the onkey down is triggered when a key is depressed and onkeyup is triggered when it is released.

See how this event handler works for yourself: onkeydown onkeyup

Using What You Know

You should now be capable of taking any of the scripts that you have that are triggered by mouse events and modify them so that they can be similarly triggered by keyboard events. Those who prefer the keyboard to the mouse will thank you for it.

Past Lessons

1. Introduction
2. Decision Making
3. Functions
4. Maintain and Test
5. External Script and Noscript
6. Object Oriented Javascript
7. Loops
8. More Predefined Classes
9. Document Object Model