The onFocus Event

This is a great Event Handler that allows you to create action when the reader uses the mouse, tabs or arrow keys to focus on one item on your webpage. This works for form object drop-down boxes, text boxes, and textarea boxes. Here is an example of a script that writes text to the status bar when the user lets the browser know where their focus is by clicking into one of the two input boxes:

HTML file: Displayed by browser:
<body>

<FORM>
<INPUT TYPE="text" SIZE="30"
onFocus="window.status='Write your name in the box';">
<INPUT TYPE="text" SIZE="50"
onFocus="window.status='Write your address here';">
</FORM>

</body>

It's interesting that this does not always work. If I run the form from my hard drive, it works perfectly, but running online does not show anything in the status bar at all, no matter where I focus. What a bummer.

Note: Never put an alert() handler to any onFocus Event! For example, if you had an alert() in the script above, the user will trigger a pop up an alert window by focusing on an input box. The focus will be lost from the input box, until the user clicks OK on the alert. When the alert window closes, focus returns to the input box but a new alert box will pop up! The reader will be stuck in a nasty loop, like what I had with assignment #5.

BackTable of ContentsNext