focusout event

Categories: Events > Form Events | Forms
Bind an event handler to the "focusout" event, or trigger that event on an element.

Contents:

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

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

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

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

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

Example:

Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count. (The blur count does not change because those events do not bubble.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  .inputs {
    float: left;
    margin-right: 1em;
  }
  .inputs p {
    margin-top: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<div class="inputs">
  <p>
    <input type="text"><br>
    <input type="text">
  </p>
  <p>
    <input type="password">
  </p>
</div>
<div id="focus-count">focusout fire</div>
<div id="blur-count">blur fire</div>
 
<script>
var focusout = 0,
  blur = 0;
$( "p" )
  .on( "focusout", function() {
    focusout++;
    $( "#focus-count" ).text( "focusout fired: " + focusout + "x" );
  } )
  .on( "blur", function() {
    blur++;
    $( "#blur-count" ).text( "blur fired: " + blur + "x" );
  } );
</script>
 
</body>
</html>

Demo: