Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="keywords" content="포토샵,포샵질" />
        <meta name="Author" content="ganji" />
        <meta http-equiv="content-type" content="text/html; charset=euc-kr" />
        <title> 문서 </title>

        <style type="text/css" media="all">
        /* input 의 스타일 */
        .gInput {
                background-color:#fbfbfb;
                height:22px;
                font:12px "굴림";
                color:#333;
                border:1px solid #ddd;
                padding:3px;
        }
        .gInput_on {
                background-color:#fff;
                height:22px;
                font:12px "굴림";
                color:#333;
                border:1px solid #39f;
                padding:3px;
        }

        /* textarea 의 스타일 */
        .gInput_t {
                background-color:#fbfbfb;
                height:50px;
                font:12px "굴림";
                color:#333;
                border:1px solid #ddd;
                padding:3px;
        }
        .gInput_t_on {
                background-color:#fff;
                height:50px;
                font:12px "굴림";
                color:#333;
                border:1px solid #39f;
                padding:3px;
        }

        .gTb {background-color:#eee; width:600px; table-layout:fixed;}
                .gTb tr{background-color:#fff; font:11px '돋움'; letter-spacing:-1px;}
                        .gTb tr td.tdL{background-color:#fbfbfb; font-weight:bold;}
        </style>
</head>
<body>

<form id="w_form" name="w_form">
<table class="gTb" cellSpacing="1" cellpadding="5" border="0">
    <colgroup><col width="150px" /><col /></colgroup>
    <tbody>
    <tr>
        <td class="tdL">아이디</td>
        <td><input type="text" class="gInput" size="40" /></td>
    </tr>
    <tr>
        <td class="tdL">비밀번호</td>
        <td><input type="password" class="gInput" size="40" /></td>
    </tr>
    <tr>
        <td class="tdL">내용</td>
        <td><textarea style="width:100%;" class="gInput_t"></textarea></td>
    </tr>
    </tbody>
</table>
</form>
<br />

타겟 밖에 있을 경우에는 적용 안함 : <input type="password" class="gInput" size="40" />

<script type="text/javascript" language="JavaScript">
//<![CDATA]
function ipt_onClass(tgId, className1, className2){ // 타겟 아이디, input의 className, textarea의 className
        var f_ipt = document.getElementById(tgId).getElementsByTagName("input"); // 타겟에 속해있는 모든 input
        var txta = document.getElementById(tgId).getElementsByTagName("textarea"); // 타겟에 속해있는 모든 textarea

        for(i = 0; i < txta.length; i++) { // textarea 처리
                txta[i].onfocus = function() {
                        this.className=className2+'_on';
                }
                txta[i].onblur = function() {
                        this.className=className2;
                }
        }

        for(i = 0; i < f_ipt.length; i++) { // input의 type가 text 또는 password 라면 처리
                if(f_ipt[i].type=="text" || f_ipt[i].type=="password"){
                        f_ipt[i].onfocus = function() {
                                this.className=className1+"_on";
                        }
                }

                if(f_ipt[i].type=="text" || f_ipt[i].type=="password"){
                        f_ipt[i].onblur = function() {
                                this.className=className1;
                        }
                }
        }
}

ipt_onClass('w_form', 'gInput', 'gInput_t');
//]]>
</script>

</body>
</html>