onfocusin
Event
Example
Execute JavaScript when an input field is about to get focus:
<input type="text" onfocusin="myFunction()">
More examples are available at the bottom of this page.
Definition and Usage
The onfocusin event is triggered when an element is about to receive focus.
Tip: The onfocusin event is similar to the onfocus event. The main difference is that the onfocus event does not bubble. Therefore, if you need to know if an element or its child elements have received focus, you should use the onfocusin event.
Tip: Although the Firefox browser does not support the onfocusin event, you can use the onfocus event with the optional useCapture parameter of the addEventListener() method to check if an element or its child elements have received focus.
Tip: The opposite event of onfocusin is the onfocusout event.
Browser Support
Event | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
onfocusin | Yes | Yes | No | Yes | Yes |
Note: The onfocusin event using the HTML DOM syntax in Chrome, Safari, and Opera 15+ browsers may not work properly. However, it works as an HTML element when using the addEventListener() method.
Syntax
In HTML:
In JavaScript (may not work in Chrome, Safari, and Opera 15+):
In JavaScript, using the addEventListener() method:
Note: Internet Explorer 8 and earlier versions do not support the addEventListener() method.
Technical Details
Bubbles: | Yes |
---|---|
Cancelable: | No |
--- | --- |
Event Type: | FocusEvent |
--- | --- |
Supported HTML Tags: | All HTML elements, except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
--- | --- |
More Examples
Example
Using both "onfocusin" and "onfocusout" events:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Example
Event delegation: Set the useCapture parameter of addEventListener() to true (for focus and blur):
<form id="myForm"> <input type="text" id="myInput"></form>
<script>var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() { document.getElementById("myInput").style.backgroundColor = "yellow"; }
function myBlurFunction() { document.getElementById("myInput").style.backgroundColor = ""; }
</script>
Example
Event delegation: Using the focusin event (not supported in Firefox):
<form id="myForm"> <input type="text" id="myInput"></form>
<script>var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() { document.getElementById("myInput").style.backgroundColor = "yellow"; }
function myBlurFunction() { document.getElementById("myInput").style.backgroundColor = ""; }
</script>