Implement program flow - Programming in HTML5 with JavaScript and CSS3 - page 140

Focus events
Focus events occur when an element receives or loses the focus. Table 2-2 lists the available
events related to focus.

TABLE 2-2 The DOM focus events

Event Description

Raised when the element receives the focus focus

Raised when the element loses the focus blur

Raised just before an element receives the focus focusin

Raised just before an element loses the focus focusout

The number of focus events provide very good flexibility in how the focus of any particular
DOM element is handled with respect to the timing. The blur event is commonly used to vali-
date form fields. You can use the focus() method to set the focus to any element that causes
the focus event hierarchy to occur. The following code shows how to use the blur event:

<script>
window.onload = function () {
document.getElementById("firstNameText").focus();
document.getElementById("firstNameText").addEventListener("blur", function () {
if (this.value.length < 5) {
document.getElementById("ruleViolation").innerText =
'First Name is required to be 5 letters.';
document.getElementById("ruleViolation").style.color = 'red';
this.focus();
}
});
}
</script>

Keyboard events
Keyboard events occur when keys are pressed on the keyboard. The keyboard events in
Table 2-3 are available to be captured.

TABLE 2-3 Available keyboard events

Event Description

Raised when a key is pushed down keydown

Raised when a key is released keyup

Raised when a key is completely pressed

keypress