CODEWITHSUNDEEP
javascriptjquery
Sungguk Lim
Sungguk Lim

Reputation: 6228

how to make this code short & optimal

<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");
        });

Upvotes: 1

Views: 168

Answers (1)

SLaks
SLaks

Reputation: 887459

Like this:

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

Or, better yet:

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

Upvotes: 7

Related Questions