how to make this code short & optimal
<pre><code>&lt;HTML&gt;
&lt;HEAD&gt;
    &lt;title&gt;Login&lt;/title&gt;
    &lt;script type="text/javascript" src="http://script.auction.co.kr/common/jquery.js"&gt;&lt;/script&gt;     
    &lt;script type="text/javascript"&gt;             
    $(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");
        });


    });
    &lt;/script&gt;
&lt;/HEAD&gt;
&lt;body&gt;
    &lt;form id="Form1" method="post" runat="server"&gt;
        &lt;div id="body"&gt;     
            &lt;input type="text" id="txtID" name="txtID" CssClass="txt" Width="130px" tabIndex="1"&gt;&lt;/input&gt;
            &lt;input type="password" id="txtPassword" name="txtPassword" Width="130px" TextMode="Password" tabIndex="2"&gt;&lt;/input&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>Here is a code I wrote.</p>

<p>In this code, I feel very uncomfortable , that's because  </p>

<p>two TextBoxes act almost same. </p>

<p>But I 'm not able to make this code shorter.. </p>

<p>I think there must be optimal code.</p>

<p>I know below code work same. But I hope to attach the control name or ID. to read code easily</p>

<pre><code>        $(":input").blur(function(e){
            $(this).css("background-color","white");
        });
        $(":input").focus(function(e){
            $(this).css("background-color","#FDFCDC");
        });
</code></pre>
