Blur Event




When Textbox loses focus, Blur event will trigger (Similar to Focusout event in most cases)

Input 1:

Input 2:

Input 3:





Sourcode

    Try It Yourself
 
<html>
<head>


<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

</head>
<body>

<h2>Blur Event</h2>
<hr />
<br /><br />

<b>When Textbox loses focus, Blur event will trigger</b><br />
<input id="txtInput" type="text" />

<br /><br />

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        $("#txtInput1").blur(
            function (event) {
                $("#txtInput1").css("background-color", "Yellow");
            }
        );

        $("#txtInput2").blur(
            function (event) {
                $("#txtInput2").css("background-color", "Red");
            }
        );

        $("#txtInput3").blur(
            function (event) {
                $("#txtInput3").css("background-color", "Green");
            }
        );

    });
</script>

</body>
</html>
Share with your friends!!