日期:2014-05-16  浏览次数:20330 次

jq 改变文本框背景颜色
本帖最后由 asdfwasdfwef 于 2013-03-22 02:43:15 编辑
ASP.NET 做的一个登陆 
 用户名: <input type="text" name="user" id="txtUserName" runat="server" class="Logo_Input" />
 密码: <input type="password" name="pwd" id="txtUserPwd" runat="server" class="Logo_Input" />
 验证码: <input name="chknumber" type="text" id="txtChknumber" maxlength="4" runat="server" class="Logo_Input chknumber_input" />
 <a href="#" id="inputLogo" class="Logo_button_01" onserverclick="login_Click" runat="server">提交</a>


/*文本框初始样式*/
.Logo_Input
{
width: 100px;
height: 17px;
background-color: #87adbf;
border: solid 1px #153966;
font-size: 12px;
color: #283439;
}
/*文本框为空时,改变的文本框样式*/
.Logo_Inputborder{
width: 100px;
height: 17px;
background-color: red;
border: solid 1px #153966;
font-size: 12px;
color: #283439;
}



/*验证非空*/
 $(document).ready(function(){
 $('#inputLogo').click(function(event){
 var txtUserName=$('#txtUserName').val();
 var txtUserPwd=$('#txtUserPwd').val();
 var txtChknumber=$('#txtChknumber').val();
 
 if(txtUserName.length<1)
 {
  $('#txtUserName').addClass('Logo_Inputborder');
 event.preventDefault();
 } else  if(txtUserPwd.length<1)
 {
  $('#txtUserPwd').addClass('Logo_Inputborder');
 event.preventDefault();
 } else  if(txtChknumber.length<1)
 {
 $('#txtChknumber').addClass('Logo_Inputborder');
 event.preventDefault();
 } 
 })});

$(function(){
/*清空*/
   $('#Reset').click(function(){
     $('input:text').val("");
     $('input:password').val("");
    });
    
/*改变文本框颜色*/
     $('input:text').focus(function(){
     $(this).addClass('Logo_Input');
    });
     $('input:password').focus(function(){
     $(this).addClass('Logo_Input');
    });
 
  });


提交时,能把文本框背景改成红色,但是获得焦点时,
却怎么也不能把文本框的颜色改回原来的了
 $('input:password').focus(function(){
     alert(0);
     $(this).addClass('Logo_Input');
    });
可以弹出提示 0 ,可是CSS样式却不起作用
input function class

------解决方案--------------------
$('#txtChknumber').addClass('Logo_Inputborder'); 改成 $(this).attr('class','Logo_Inputborder');
$('#txtChknumber').addClass('Logo_Input'); 改成 $(this).attr('class','Logo_Input');
你的问题是class合并了。
------解决方案--------------------
/*改变文本框颜色*/
     $('input:text').focus(function(){
      $(this).removeClass('Logo_Inputborder').addClass('Logo_Input');