Now, here in this tutorial, I’ll explain how to change the textbox background color on focus or blur jQuery event in Asp.net. In this example, I’ve used jQuery focus event to apply a background color to asp.net textbox control and blur event will remove applied background color.
You can also check out my previous tutorials where I’d explained most popular jQuery fading effects, jQuery fade-in and fade-out effect using css3 transition, export gridview data to word excel text pdf, and other more amazing tutorials on JavaScript here.
To change the textbox background color on focus or blur jquery events, we need to write the following simple jquery script.
Change Background Color for Asp.net TextBox Control in jQuery
//jQuery on focus method for Asp.net control
$(‘#txtTextbox’).focus(function () {
$(this).addClass(“txtFocus”);
});
//jQuery on blur method for Asp.net control
$(‘#txtTextbox’).blur(function () {
$(this).removeClass(“txtFocus”);
});
</script>
Likewise you can also use same for html input control as below:
Change Background Color for HTML input Control in jQuery
//jQuery on focus method for HTML input
$(‘input[type=”text”]’).focus(function () {
$(this).addClass(“txtFocus”);
});
//jQuery on blur method for HTML input
$(‘input[type=”text”]’).blur(function () {
$(this).removeClass(“txtFocus”);
});
</script>
Change Textbox Background Color on Focus or Blur in Asp.net
Following is the complete HTML markup code that I used for the demostration to change the textbox background color on focus or blur in asp.net:
<head id=”Head1″ runat=”server”>
<title>Change Textbox Background Color on Focus or Blur in Asp.net</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function () {
//jQuery on focus method for HTML input
$(‘input[type=”text”]’).focus(function () {
$(this).addClass(“txtFocus”);
});
//jQuery on blur method for HTML input
$(‘input[type=”text”]’).blur(function () {
$(this).removeClass(“txtFocus”);
});
//jQuery on focus method for Asp.net control
$(‘#txtTextbox’).focus(function () {
$(this).addClass(“txtFocus”);
});
//jQuery on blur method for Asp.net control
$(‘#txtTextbox’).blur(function () {
$(this).removeClass(“txtFocus”);
});
});
</script>
<style type=”text/css”>
.txtFocus
{
border: 1px solid #fefefe;
background-color: #e5e5e5;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<h4>
jQuery on focus and blur textbox change color example</h4>
<table>
<tr>
<td>
To test jQuery “focus” event, click on any of the textbox and click outside
textbox to test “blur” event
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
HTML input example:<input type=”text” id=”txtInput” />
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
Asp.net textbox example:<asp:TextBox ID=”txtTextbox” runat=”server”
ClientIDMode=”Static” />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Example Result
