How to Highlight a Text Box When Clicked Using Javascript
In this article, we show how to highlight a text box when clicked using Javascript.
This means that if we click on a text box with a mouse, the text box will be highlighted any color that we choose.
We achieve this using the 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 HTML code to create the text box is shown below.
The HTML code simply creates a text box. The code onfocus="highlightyellow(this)" executes the function highlightyellow() when the text box is on focus (when it is clicked).
The full Javascript code is shown below.
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.
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:
|
Enter your name: |
|
|
Enter your email: |
|
|
Enter your phone number: |
The HTML code to create the text boxes is shown below.
The full Javascript code is shown below.
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.