Thus if the user performs the following actions, the focusout event will be invoked:
- When the user clicks outside the active element, the focus is lost.
- Switching to another application or file.
- Use TAB key/access key to navigate away from the active element, and so the focus is lost.
- Calling the blur method on an active element.
- Calling the setActive method on a non-active element that can be active.
- Calling the focus method on a non-active element that can be active.
Note: The focusin event is just the opposite of the focusout event, where the event action is performed when the user creates a focus on the active element. For focusin, we use onFocusIn event handler.
Example of focusout event
Let's look and understand both the focusin and focusout events with the help of the below example:
- In the body section of the html, we have created a form having a user and a password field.
- While creating the form, we have invoked both the Focus_In and Focus_Out functions.
- Two actions will be performed-When the user clicks on any of the textbox, the color of the text changes to red which means that focus is in. So, the Focus_In function is called. Another action takes place when the user clicks anywhere on the page but not on the active part (i.e. on the text of the textbox or on the password in the textbox) which means the focus is lost and thus the color changes back to blue. So, the Focus_Out function is invoked in this case.
- Also note that when the user executes the code on the web browser, the color of the text is seen black unless the user does not makes any action.
The output of the above code is shown below: