articles

JQuery blur method

Sachindra Singh11076 22-Feb-2011

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:

JQuery blur method

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


 


Updated 04-Mar-2020

Leave Comment

Comments

Liked By