javascript

Chapter 13: Scripting Forms
});
target.style.backgroundColor = “red”;
} else {
target.style.backgroundColor = “”;
}
The onfocus event handler simply changes the background color of the text box to yellow, more clearly
indicating that it ’ s the active field. The onblur and onchange event handlers turn the background color
red if any non - numeric character is found. To test for a non - numeric character, a simple regular
expression is used against the text box ’ s value . This functionality has to be in both the onblur and
onchange event handlers to ensure that the behavior remains consistent regardless of text - box changes.
The relationship between the blur and change events is not strictly defined. In
some browsers, the blur event fires before change ; in others, it ’ s the opposite. You
can ’ t depend on the order in which these events fire, so use care whenever they are
required.
Scripting Text Boxes
There are two ways to represent text boxes in HTML: a single - line version using the < input > element
and a multiline version using < textarea > . These two controls are very similar and behave in similar
ways most of the time. There are, however, some important differences.
The < input > element must have its type attribute set to “ text ” to display a text box. The size
attribute can then be used to specify how wide the text box should be in terms of visible characters.
The value attribute specifies the initial value of the text box, and the maxlength attribute specifies the
maximum number of characters allowed in the text box. So to create a text box that can display
25 characters at a time but has a maximum length of 50, the following code can be used:
< input type=”text” size=”25” maxlength=”50” value=”initial value” >
The < textarea > element always renders a multiline text box. To specify how large the text box should
be, you can use the rows attribute, which specifies the height of the text box in number of characters, and
the cols attribute, which specifies the width in number of characters, similar to size for an < input >
element. Unlike < input > , the initial value of a < textarea > must be enclosed between < textarea > and
< /textarea > , as shown here:
< textarea rows=”25” cols=”5” > initial value < /textarea >
Also unlike the < input > element, a < textarea > cannot specify the maximum number of characters
allowed using HTML.
441