jq 改变文本框背景色彩

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');
    });
     $('input:password').focus(function(){

jq 改变文本框背景色彩

相关推荐