JQuery Focus Event

In this article we will learn how JQuery focus events work

Focus event triggers whenever control receives focus.  Example: change textbox background color on textbox focus.

Example 1 - Focus Event: Change textbox background color on Focus (Live Demo)
I have a 3 html input control, whose id is "txtInput1", "txtInput2" and "txtInput3" on receiving focus it should change its background color to Yellow, Red and Green.

Input 1: <input id="txtInput1" type="text" /> <br /><br />
Input 2: <input id="txtInput2" type="text" /> <br /><br />
Input 3: <input id="txtInput3" type="text" /> <br /><br />

JQuery script for changing background color on receiving focus


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


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


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


        $("#txtInput3").focus(
            function (event) {
                $("#txtInput3").css("background-color", "Green");
            }
        );
    });
</script>


Example 2 - FocusIn Event: FocusIn Event is similar to focus event.  Let try to Change textbox background color on Focus with focusin JQuery event (Live Demo)
I have a 3 html input control, whose id is "txtInput1", "txtInput2" and "txtInput3" on receiving focus it should change its background color to Yellow, Red and Green.

Input 1: <input id="txtInput1" type="text" /> <br /><br />
Input 2: <input id="txtInput2" type="text" /> <br /><br />
Input 3: <input id="txtInput3" type="text" /> <br /><br />

JQuery script for changing background color on receiving focus


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


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


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


        $("#txtInput3").focusin(
            function (event) {
                $("#txtInput3").css("background-color", "Green");
            }
        );
    });
</script>

Example 3 - FocusOut Event: Change textbox background color on Focus out (Live Demo)

I have a 2 html input control, whose id is "txtInput1" and "txtInput2"  

Input 1: <input id="txtInput1" type="text" /> <br /><br />
Input 2: <input id="txtInput2" type="text" /> <br /><br />

JQuery script for changing background color on receiving focus

<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        $("#txtInput1").focusin(

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


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




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


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


    });

</script>

I will be discussing more JQuery examples in JQuery example series.