Java Reference
In-Depth Information
are passed directly to that element. For example, if a text box has focus, pressing keys will enter
values into the text box. Also, if a button has the focus, pressing the Enter key causes the button's
onclick
event handler code to fire, just as if a user had clicked the button with his mouse.
The user can set which element currently has the focus by clicking it or by using the Tab key to
select it. However, you as the programmer can also decide which element has the focus by using the
form element's object's
focus()
method. For example, if you have a text box for the user to enter his
age and he enters an invalid value, such as a letter rather than a number, you can tell him that his
input is invalid and send him back to that text box to correct his mistake.
Blur
, which perhaps could be better called “lost focus,” is the opposite of focus. If you want to remove a
form element from being the focus of the user's attention, you can use the
blur()
method. When used with
a form element, the
blur()
method usually results in the focus shifting to the page containing the form.
In addition to the
focus()
and
blur()
methods, all the form element's objects have the
onfocus
and
onblur
event handlers. These are fired, as you'd expect, when an element gets or loses the focus,
respectively, due to user action or the
focus()
and
blur()
methods. The
onblur
event handler can be a
good place to check the validity of data in the element that has just lost the focus. If the data is invalid,
you can set the focus back to the element and let the user know why the data he entered is wrong.
Note
Remember that the
submit()
method behaves differently than
focus()
and
blur()
in that it does not fire the
submit
event.
One thing to be careful of is using the
focus()
and
blur()
methods in the
focus
or
blur
event
listener code. There is the danger of an infinite loop occurring. For example, consider two elements,
each of whose
focus
events passes the focus to the other element. Then, if one element gets the
focus, its
focus
event will pass the focus to the second element, whose
focus
event will pass the
focus back to the first element, and so on until the only way out is to close the browser down. This
is not likely to please your users!
Also be very wary of using the
focus()
and
blur()
methods to put focus back in a problem field if
that field or others depend on some of the user's input. For example, say you have two text boxes:
one in which you want users to enter their city and the other in which you want them to enter their
state. Also say that the input into the state text box is checked to make sure that the specified city is
in that state. If the state does not contain the city, you put the focus back on the state text box so that
the user can change the name of the state. However, if the user actually input the wrong city name
and the right state name, she may not be able to go back to the city text box to rectify the problem.
button elements
We're starting our look at form elements with the standard button element because it's probably
the most commonly used and is fairly simple. The HTML element to create a button is
<input/>
.
For example, to create a button called
myButton
, which has the words “Click Me” on its face, the
<input/>
element would need to be as follows:
<input type="button" name="myButton" value="Click Me" />
