Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Change Textbox Background Color on Focus,on Blur using Asp.net

Oct 4, 2012
Introduction

Here I will explain how to change textbox background color on focus using
JQuery in asp.net.

Description:
  
In previous posts I explained change background of controls when validation fails, Change textbox background color in JavaScript,
split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how to change textbox background color on focus using JQuery in asp.net.

To implement this functionality in JavaScript we need to write much code for that check this post Change textbox background color in JavaScript but in JQuery we can achieve this functionality just by simple coding that would be like as shown below


<script type="text/javascript">
$(document).ready(function() {
$('INPUT[type="text"]').focus(function() {
$(this).addClass("focus");
});
$('INPUT[type="text"]').blur(function() {
$(this).removeClass("focus");
});
});
</script>
If you observe above script I am adding css class to textboxes when in focus event and removing the css class on blur event in this way we can change the color of textboxes on focus using JQuery

Example:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Change textbox background color on focus in jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('INPUT[type="text"]').focus(function() {
$(this).addClass("focus");
});

$('INPUT[type="text"]').blur(function() {
$(this).removeClass("focus");
});
});
</script>
<style type="text/css">
.focus {
border: 2px solid red;
background-color: #FEFED5;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td><b>Name:</b></td>
<td><asp:TextBox ID="txtName" runat="server"/></td>
</tr>
<tr>
<td><b>FirstName:</b></td>
<td><asp:TextBox ID="txtfname" runat="server"/></td>
</tr>
<tr>
<td><b>LastName:</b></td>
<td><asp:TextBox ID="txtlname" runat="server"/></td>
</tr>
<tr>
<td><b>Location:</b></td>
<td><asp:TextBox ID="txtlocation" runat="server"/></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnSubmit" runat="server" Text="Submit"/></td>
</tr>
</table>

</div>
</form>
</body>
</html>

Live Demo

To check demo try to focus on below textboxes
Name:
FirstName:
LastName:
Location:

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

4 comments :

Anonymous said...

Seems to work ok unless you have TextMode="Password". How do you get it to work in that case?

Anonymous said...

Thanks. your solutions are simple and effective. Nice ideas and moves.

Unknown said...

Hello sir I want to apply this code only one textbox .
I have to use following code but that code is not working
Please help me
$(document).ready(function () {
$('TextBox1').focus(function () {
$(this).addClass("focus");
});
$('TextBox1').blur(function () {
$(this).removeClass("focus");
});
});

Unknown said...

If My textbox is templateFiled of gridview then how can i call using jQuery?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.