jQuery Show Popup on Page Load

6 Sep 2013

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

No comments:

Post a Comment