Sunday, 25 August 2013

Add,Remove Class in Textbox on focus and on Blur using JQuery and ASP.NET


This is sample example for Add,Remove Class in Textbox on focus and on Blur using JQuery and ASP.NET.

Sample Code


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Changing Textbox class 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>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>City:</b></td>
<td><asp:TextBox ID="txtCity" runat="server"/></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnSubmit" runat="server" Text="Submit"/></td>
</tr>
</table>
</div>
</form>
</body>
</html>