2010-02-26 3 views
1
<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> 

comment rendre ce code court et optimal

Voici un code que j'ai écrit.

Dans ce code, je me sens très mal à l'aise, c'est parce que

deux TextBoxes agissent presque même.

Mais je ne suis pas en mesure de rendre ce code plus court ..

Je pense qu'il doit y avoir un code optimal.

Je sais que le code fonctionne de la même façon. Mais j'espère attacher le nom de contrôle ou l'identification. lire facilement le code

 $(":input").blur(function(e){ 
      $(this).css("background-color","white"); 
     }); 
     $(":input").focus(function(e){ 
      $(this).css("background-color","#FDFCDC"); 
     }); 
+0

Je vous recommande de ne pas optimiser prématurément =/ – Warty

Répondre

7

Comme ceci:

$("#txtID, #txtPassword").focus(function(e){ 
     $(this).css("background-color","#FDFCDC"); 
    }).blur(function(e){ 
     $(this).css("background-color","white"); 
    }); 

Ou, mieux encore:

<style type="text/css"> 
    #txtID, #txtPassword { 
     background-color: white; 
    } 
    #txtID:active, #txtPassword:active { 
     background-color: #FDFCDC; 
    } 
</style> 
+0

qui est le meilleur? Andy? –

+2

Le deuxième est meilleur, car il n'a pas besoin de Javascript. En outre, ce sera probablement plus rapide. – SLaks

+0

Mais est-il pris en charge dans les mêmes navigateurs que la première approche? –

Questions connexes