jQuery API

.focusout()

.focusout( handler(eventObject) ) Returns: jQuery

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

  • version added: 1.4.focusout( handler(eventObject) )

    handler(eventObject)A function to execute each time the event is triggered.

This method is a shortcut for .bind('focusout', handler).

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 from parent elements (in other words, it supports events bubbling).

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

Example:

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

<!DOCTYPE html>
<html>
<head>
  <style>span {display:none;}</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	
<p>
  <input type="text" /> 
  <span>focusout fire</span>
</p>
<p>
  <input type="password" />
  <span>focusout fire</span>
</p>
<script>
$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});
    </script>
</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .focusout() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • Raghu
    Demo Focus out is not sufficient
  • Lorrat
    The difference is that the events bubble to parent elements in focusin/focusout, which doesn't occur on blur/focus - just like the description states
  • exodusnicholas
    bad demo, when focusing out from an input inside of a div, when the focusout is put on the div, when you focus out from the input to it's parent div, it messes up. It's just like blur.
  • focusin/focusout will fire on parent elements of the focused/blurred element. If you look at the example, the focusout event is firing on the paragraph element, even though the child input element is blurring.
  • coreyk
    focus() & blur() do not support event bubbling
  • But what's the difference between focusout() and blur()?
  • BMCouto
    I'm not understanding the difference between focusin()/focusout() and focus()/blur(). What exactly is new here?