onfocusin event

DOM Events FocusEvent

Definition and usage

The onfocusin event occurs when an element is about to gain focus.

Although Firefox does not support the onfocusin event, you can determine whether a child element of an element gains focus by using the capture listener of the onfocus event (using the optional useCapture parameter of the addEventListener() method).The onfocusin event is similar to onfocus EventThe main difference is that the onfocus event does not bubble. Therefore, if you want to know whether an element or its child element gains focus, you should use the onfocusin event.

Although Firefox does not support the onfocusin event, you can determine whether a child element of an element gains focus by using the capture listener of the onfocus event (using the optional useCapture parameter of the addEventListener() method)..

Although Firefox does not support the onfocusin event, you can determine whether a child element of an element gains focus by using the capture listener of the onfocus event (using the optional useCapture parameter of the addEventListener() method).Hint: onfocusout EventThe onfocusin event is similar to

Opposite.

Instance

Example 1

Execute JavaScript when the input field is about to gain focus:

Try It Yourself

<input type="text" onfocusin="myFunction()">

More TIY examples are at the bottom of the page.

Syntax

In HTML:< element.addEventListener("focusin",onfocusin="

Try It Yourself

">

In JavaScript, use the addEventListener() method:In JavaScript (may not work properly in Chrome, Safari, and Opera 15+):.addEventListener("focusin",.onfocusin = function(){

Try It Yourself

};

In JavaScript, use the addEventListener() method:object .addEventListener("focusin",myScript

Try It Yourself

Note:); Internet Explorer 8 or earlier versions do not supportaddEventListener() method

.

Technical details Supports
Bubbling: Cancellable:
Not supported FocusEvent
Supported HTML tags: All HTML elements except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> and <title>
DOM version: Level 2 Events

Browser support

The numbers in the table indicate the first browser version that fully supports this event.

Event Chrome IE Firefox Safari Opera
onfocusin Supports Supports 52.0 Supports Supports

Note:The onfocusin event may not work as expected in Chrome, Safari, and Opera 15+ when using the JavaScript HTML DOM syntax. However, it should be used as an HTML attribute and with the addEventListener() method (see the syntax examples below).

More examples

Example 2

Use the "onfocusin" and "onfocusout" events together:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Try It Yourself

Example 3

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>

Try It Yourself

Example 4

Event delegation: Using the focusin event:

<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>

Try It Yourself

DOM Events FocusEvent