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:
If textboxes lost their focus back color of textboxes will change as shown
below:
No comments:
Post a Comment