Wednesday, September 28, 2011

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.

2 comments:

Anonymous said...

What is difference between focus and focusin event?

Anonymous said...

what's difference between focus and focusin event?

Most Recent Post

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape