Focus

Focus occurs when a form element has been selected, or clicked, by the viewer. This can be clicking in a textbox so you can type in it, or clicking a radio button.

Sometimes you'll want to focus a particular form element so the viewer doesn't have to click it. Many textbox-based forms focus the first box automatically so the viewer can just start typing. This is done with the "focus()" method.

Look at the example below. The bottom box is focused, the top box is not. Start typing and see where the text goes.

Automatically focusing the bottom box is done using the "focus()" method. I named the focused box "bottombox". After I coded the form (named "form1"), I coded the JavaScript below to add the focus:

<script language="JavaScript">
document.form1.bottombox.focus();
</script>

Just refer to the box you want to focus like we've been doing and just add "focus()". Don't forget the parentheses or it won't work. Only one box per page (HTML file) can be focused at a time.

There is also an "onFocus" event. It can be used with any appropriate HTML object, but it's generally used with form elements like <input>s. This event is triggered as soon as the given element gains focus. This focus can be either a click by the viewer or the use of the "focus()" method.

Click in the box below to see the "onFocus" event in action.

The "onFocus" event is coded in the <input> tag of the element you're monitoring. Here's the code for the box above:

<input type="text" size=15 name="box" onFocus="alert('Ooooooooo! I\'m focused!');document.form2.box1.focus()">

This can be used to give the viewer special instructions in pop ups without cluttering the form with text instructions. Notice that I had to actually code the "focus()" because clicking the "OK" button on the alert box removes the focus from the textbox.

Blur

Blur is the opposite of focus. When a box or other element is not selected, it is "blurred". At any given time, all elements are either focused or blurred. Just like with focus, we can use JavaScript to "blur()" a box or detect when the user blurs it ("onBlur").

Below is an annoying example of using the "onFocus" event with the "blur()" method. Every time you try to click in the box, it blurs and you can't type in it.

The annoying effect above is created using the "onFocus" event to detect when you click in the box and the "blur()" method to remove the focus. Here's the code for the box:

<type="text" size=15 name="box1" onFocus="document.form3.box1.blur()">

You use "blur()" just like "focus()". Don't forget the parentheses at the end of the method.

The "onBlur" event is coded in the <input> tag just like "onFocus". It is triggered any time the box is not focused. This can be caused by the viewer clicking anywhere outside the element or by the "blur()" method.

In the form below, try changing the focus by clicking the bottom box. An "onBlur" event will pop up a box.

The alert() was triggered by the "onBlur" event coded in the first box:

<input type="text" size=15 name="box1" onBlur="alert('Hey, where are you going?')">

You must be careful when using the "onBlur" event. Remember that only one element can have focus at once. All of the rest are blurred. So, if you want to code an event, like error warnings, when the viewer leaves a particular box, the "onBlur" event may not help. All of the blurred warnings will come up at once.

This is one of the most common problems I get in my email. Coders make forms and want to validate them and provide warnings one box at a time. This is great, but the "onBlur" event is not the event to use. What happens is that the page loads, one box at most may be focused, so all of the warnings from the other box's "onBlur" events are triggered.

Fortunately, there's an "onChange" event that solves this problem.

onChange

The "onChange" event is triggered when two things occur: 1) a form element is blurred, and 2) the value of the blurred element (like content typed in a textbox) is changed. It's sort of like a "smart onBlur". This event is ideal for checking entered data one box at a time.

Fill out the simple form below and watch how an appropriate box pops up as you fill out the form. Remember, you'll need to click outside of the last box to get its "onChange" to trigger.

Here's the code for the first box so you can see the "onChange" event in code:

<input type="textbox" size=15 name="namebox" onChange="alert('Is ' + document.form5.namebox.value + ' your real name?')">

It's important to note that had I used the "onBlur" event. All of the boxes would have popped up when this page loaded because they all would have been blurred. The big difference is that "onChange" requires that the value in the box be changed and the box be blurred.

Summary & Exercises

You can focus a form element by using the "focus()" method. You can detect when an element has been focused by using an "onFocus" event in the element's <input> tag.

You can remove focus, or blur, a form element with the "blur()" method. You can detect when an element is blurred, or not focused, by coding an "onBlur" event in the element's <input> tag.

The "onChange" event is like a smart "onBlur" event. It only triggers when an element is blurred and its value has been changed.

It's also important to note that <input>s can employ most other JavaScript events as well. Support for events varies between browsers.

Now try coding a form with three textboxes asking for name, email address, and age. Have an instructional pop up box appear as each box is focused. These can be "alert()s" or, more stylish, <div>s.

Use the "onChange" event with this form to pop up error boxes. Use the email validation we've previously used.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index