Focus() and Blure() Event on TextBox using JQuery

How to use Focus() and Blure() Event on textbox control using JQuery in ASP.Net.

First, Download JQuery library from http://jquery.com. and include in web page at head section.

Design the ASP.Net web form with Three TextBox Control.

The ASP.Net web page design is :

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

Write below JQuery code at head section in aspx page.

<head>
<title>JQuery in ASP.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function() {
$(“input”).focus(function() {
$(this).css(“background-color”, “#00D96C”);
});
$(“input”).blur(function() {
$(this).css(“background-color”, “#ffffff”);
});
});
</script>
</head>

The JQuery Exmaple out put is :

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

Leave a Reply

Your email address will not be published. Required fields are marked *

4 + 9 =


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">