Home > DeveloperSection > Articles > JQuery blur method

JQuery blur method


JQuery JQuery 
Ratings:
0 Comment(s)
 6396  View(s)
Rate this:

blur method in JQuery

In JQuery blur method trigger blur event when element will lose their focus. In this article I am using blur () method on html page. In html page I had created some text boxes, if any textboxes got focus then back color of textboxes will white and if textboxes lost their focus then textboxes back color will change, as shown by below example:

Code:

<head>

    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">

       $(document).ready(function()

         {

             $("input").focus(function() //focus method will execute when input element got focus            {

                $("input").css("background-color", "white");//when input element got focus backcolor will white

            });

            $("input").blur(function() //when input element lost its focus blur event will raise

            {

                $("input").css("background-color", "gray // css will change backcolor of textboxes

            });

        });

    </script>

</head>

<body>

<h2>Using JQuery blur event </h2>

    Enter name:

    <input type="text" /><!-- input element for textboxes-->

    <br />

    <br />

    Enter age: <input type="text" />

    <br />                            

    <br />

    Enter City<input type="text" />

    <br />

    <br />

    Enter State<input type="text" />

    <br />

    <br />

   

    <button>Submit</button>

</body>

</html>

If textboxes got focus backcolor will white as shown below:

blur method in JQuery

If textboxes lost their focus back color of textboxes will change as shown below:

blur method in JQuery

 


Don't want to miss updates? Please click the below button!

Follow MindStick