focusin event

Bind an event handler to the "focusin" event, or trigger that event on an element.

.on( "focusin" [, eventData ], handler )Returns: jQuery

Description: Bind an event handler to the "focusin" event.

version added: 1.7.on( "focusin" [, eventData ], handler )
- "focusin"
  
  Type: string
  
  The string "focusin".
- eventData
  
  Type: Anything
  
  An object containing data that will be passed to the event handler.
- handler
  
  Type: Function( Event eventObject )
  
  A function to execute each time the event is triggered.

This page describes the focusin event. For the deprecated .focusin() method, see .focusin().

The focusin event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the focus event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).

This event will likely be used together with the focusout event.

Example:

Watch for a focus to occur within the paragraphs on the page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  span {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<p><input type="text"> <span>focusin fire</span></p>
<p><input type="password"> <span>focusin fire</span></p>
 
<script>
$( "p" ).on( "focusin", function() {
  $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
} );
</script>
 
</body>
</html>

Demo:

.trigger( "focusin" )Returns: jQuery

Description: Trigger the "focusin" event on an element.

version added: 1.0.trigger( "focusin" )
- "focusin"
  
  Type: string
  
  The string "focusin".

See the description for .on( "focusin", ... ).

Contents:

.on( "focusin" [, eventData ], handler )Returns: jQuery

version added: 1.7.on( "focusin" [, eventData ], handler )

Example:

Demo:

.trigger( "focusin" )Returns: jQuery

version added: 1.0.trigger( "focusin" )