본문 바로가기

Input 박스에 사라지는 배경 넣기

반응형

특히 서치 박스에 배경을 넣고 입력시 배경이 사라지는데 써 먹으면 좋습니다
<script type="text/javascript">

        function searchBoxBg (Target,Status) {
                if (Target.value.length==0 && Status=="show")
                        Target.style.backgroundImage="url(Search_BoxBg.gif)";
                else
                        Target.style.backgroundImage="";
        }

        function search (target) {
                if ( target.Keyword.value.length == 0 ) {
                        location.href="Search.html";
                        return false;
                }
                else if ( target.Keyword.value.length == 1 ) {
                        alert("2글자 이상의 검색어를 입력하세요");
                        return false;
                } else {
                        //target.Keyword.value= "잠시만 기다려주세요";
                        return true;
                }
        }

< /script>
< !-- 검색창 시작 -->
< table border="0" cellpadding="0" cellspacing="0" >
        <tr>
                <td colspan="3" width="195" height="34">
                        <table width="195" border="0" cellspacing="0" cellpadding="0" background="image/Top_searchBG.jpg">
                        <form name="Search" method="POST" action="Search.html" onSubmit="return search(this); return false;">
                                <tr height="27">
                                        <td width="35" align="right"></td>
                                        <td width="110" align="center">
                                                <input name="Keyword" type="text" size="20" value=""
                                                        onMouseDown="searchBoxBg(this,'hide')"
                                                        onKeyDown="searchBoxBg(this,'hide')"
                                                        onFocus="searchBoxBg(this,'hide')"
                                                        onBlur="searchBoxBg(this,'show')"
                                                        style="font-family:굴림;font-size:10pt;color:#333333;border:1px solid #BBBBBB;text-align:center;width:100;height:18;background-image:url('');background-position:center;background-repeat:no-repeat">
                                        </td>
                                        <script type="text/javascript">
                                                searchBoxBg(TopSearch.Keyword,'show');
                                        </script>
                                        <td width="50" align="left"><input type="image" src="Top_searchButt.jpg" width="44" height="18" border="0"></td>
                                </tr>
                        </form>
                        </table>
                </td>
        </tr>
< /table>


배경이 아닌 글자라면...
< script language=javascript>
< !--//
var sks = 1;
function clear_query()
{
        if(sks == 1)
        {
                var form = document.search;
                form.query.value = "";
                sks = 2;
        }
}  

//-->
< /script>
< form name=search method=get action="search.html" onSubmit="return search()">
< input type=text name=query style='width:246px;height:20px' value="'검색해 보세요~~!!" onfocus=clear_query();>
< input type=image src=btn_search.gif width=39 height=20 align=absmiddle style='margin:0 6 0 5'>
< /form>

반응형

댓글


Copyright ⓒ SmartWeb All rights reserved.