<HTML>
<HEAD>
<title>Login</title>
<script type="text/javascript" src="http://script.auction.co.kr/common/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":input[name='txtPassword']").blur(function(e){
$(this).css("background-color","white");
});
$(":input[name='txtPassword']").focus(function(e){
$(this).css("background-color","#FDFCDC");
});
$(":input[name='txtID']").blur(function(e){
$(this).css("background-color","white");
});
$(":input[name='txtID']").focus(function(e){
$(this).css("background-color","#FDFCDC");
});
});
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<div id="body">
<input type="text" id="txtID" name="txtID" CssClass="txt" Width="130px" tabIndex="1"></input>
<input type="password" id="txtPassword" name="txtPassword" Width="130px" TextMode="Password" tabIndex="2"></input>
</div>
</form>
</body>
Here is a code I wrote.
In this code, I feel very uncomfortable , that's because
two TextBoxes act almost same.
But I 'm not able to make this code shorter..
I think there must be optimal code.
I know below code work same. But I hope to attach the control name or ID. to read code easily
$(":input").blur(function(e){
$(this).css("background-color","white");
});
$(":input").focus(function(e){
$(this).css("background-color","#FDFCDC");
});