Thursday 7 March 2013

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



 3, 2013

<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 {
border2px 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>

No comments:

Post a Comment