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:
x.style.background="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