Introduction:
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.
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
|
|
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 Email
|
|||
4 comments :
Seems to work ok unless you have TextMode="Password". How do you get it to work in that case?
Thanks. your solutions are simple and effective. Nice ideas and moves.
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");
});
});
If My textbox is templateFiled of gridview then how can i call using jQuery?
Note: Only a member of this blog may post a comment.