How to use JQuery Event focusout() Method

This article describe about jQuery Event focusout() Method.
  • 5049

jQuery Event focusout() Method

This event occurs when element lose focus.

When focusout event occur on the any child element focusout() method define a function to run.

focusout() method generate trigger if any child element lose the focus unlike the blur() method.






<!DOCTYPE html>



<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("div").focusin(function () {

            $(this).css("background-color", "Gray");


        $("div").focusout(function () {

            $(this).css("background-color", "yellow");






<div style="border: 2px solid Red;padding:15px;">

Enter First name: <input type="text" /><br />

Enter Last name: <input type="text" />


<p>Click outside the div to lose focus (blur).</p>






focusout method pic34.jpg


Note: In this output mouse click in the input field that is why get focus, if you click outside focus will be lose.

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here


More Articles

© 2020 DotNetHeaven. All rights reserved.