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
<script type="text/javascript">
//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
<script type="text/javascript">
//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>
As you can see in above sample script, we’ve used focus and blur event to add or remove the color class. It’ll help us to apply or remove the background color of input control.
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:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Change Textbox Background Color on Focus or Blur in Asp.net</title>
<script type="text/javascript" src="https://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
Download Example Code
Git Repo
That’s it, by using this way you can change textbox background color onFocus or onBlur event in jQuery using Asp.net web page.
Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.
Happy coding!
