``` More examples are available at"> ``` More examples are available at" />
Easy Tutorial
❮ Jsref Some Jsref Fixed ❯

onfocusin Event

Event Object

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>

Event Object

❮ Jsref Some Jsref Fixed ❯