By: Pradeep.Chava Mar 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 {
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>
|
No comments:
Post a Comment