Javascript- Onfocus Event Handler


The onfocus event handler in Javascript is an event handler that executes when an item becomes into focus on a user's screen, such as when a user clicks inside of a text box. This text box, then, is said to be in focus by the user, since s/he has clicked on it. Another example is when a user is strolling down a list of items in a select box. When s/he has moved the cursor across each option, at each particular respective time, that option on the select box is said to be at focus.

The onfocus event handler is mostly used with text boxes and select drop-down lists to highlight each option that a user is currently scrolling over to show specifically that that item is the one currently strolled over and selected. It is used a lot on forms. It makes the user know exactly which field on a form is highlighted at any given moment.

A programmer can use the onfocus event handler to do any various task when an item is on focus. However, the most common task is to change the color of the background of the item on focus. This will clearly and easily differentiate it from the others and make it stand out that this item is the one which is currently on focus.

Example of the Onfocus Event Handler

Enter your name:

You can see that this text box highlights yellow when it is on focus (clicked). This demonstrates how we can create different situations for an object when it is on focus. Here we changed the background color to yellow when the item gets on focus.

Know that once clicked, an object will keep and retain the onfocus event handler properties even after being clicked away from. Notice now that if you click another part of the page, the text box still remains yellow. In order to revert back to what it was before, you also have to add an onblur event handler to the text box to revert it back to its white background text box when clicked away from.

How to Use the Onfocus Event Handler

So how do we build the code to create the text box shown above. The full code would be:

The Javascript code can go into the <head></head> tags, since this is the normal place which Javascript goes into a document. The HTML text box goes into the regular HTML code where you would like it in the body tag.

The Javascript code creates a function named highlightyellow() which makes the background yellow by the line:"yellow";

The HTML code simply creates a text box and adds the code onfocus="highlightyellow(this)". This executes the function highlightyellow() when the text box is on focus.

Combining Onfocus and Onblur Event Handlers For an Item

As described perviously, an item retains its onfocus properties even when clicked away from. Usually, a programmer only wants an item to have its onfocus properties (in this case highlighting yellow) when the item is currently onfocus and revert back to what it was before when clicked away. To do this, we combine the onfocus event handler with the onblur event handler. The onblur event handler does the opposite of the onfocus event handler. When an item goes out of focus (when it is clicked away from), the onblur event handler allows you to change its properties. since our background was white before it became yellow, we use the onblur function to change it back to a white background.

The below code is an example of this shown below.

Enter your name:

Enter your email:

Enter your phone number:

To create this we have 2 event handlers, onfocus and onblur. The onfocus event handler will change the item's background to yellow when clicked on and the onblur event handler will change the item's background to white when clicked away from.

The code to do this is:

Related Resources

Javascript- Onload Event Handler

Javascript- Onunload Event Handler

Javascript- Onblur Event Handler

Javascript- Onclick Event Handler

Javascript- Onchange Event Handler

Javascript- Onkeydown Event Handler

Javascript- Onkeyup Event Handler

Javascript- Onmouseover Event Handler

Javascript- Onmousedown Event Handler

Javascript- Onmouseup Event Handler

Javascript- Onmouseout Event Handler

Javascript- Onreset Event Handler

Javascript- Onabort Event Handler

Javascript- Oncopy Event Handler

HTML Comment Box is loading comments...