태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

12년 전

특히 서치 박스에 배경을 넣고 입력시 배경이 사라지는데 써 먹으면 좋습니다
<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>

</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>

추천 목록

번호	제목
	Input 박스에 사라지는 배경 넣기
197	부모dom 의 넓이에 따라 자동으로 넓이 조절하기
196	이미지가 클 경우 테이블이 늘어났다가 줄어들때
195	from 태그의 이해
194	첨부메일 보내기
193	select multiple 이용한 다중값 받아오기
192	SelectBox 클래스입니다
191	관리자 및 회원의 페이지 접근 권한 간단구현
190	FIELDSET 태그를 이용하면 때에 따라 깔끔한 테이블을 만들 수 있다
189	overflow : hidden , text-overflow : ellipsis (글의 길이가 칸의 길이를 넘어갈 경우 ... 로 대체 )
188	금지 금칙어 불량단어 필터링
187	?변수=입력값&변수=입력값 이런식으로 자바스크립트로 cgi없이 값 넘겨주기
186	화면에 완전히 고정된 배너
185	업로드 확장자 체크하기
184	input박스에 값이 들어오자 마자 해당되는값 출력
183	iexplore.exe 단축 명령
182	textarea 버튼으로 늘리고 줄이기
181	textarea 투명하게 만들기
180	select의 선택된 옵션값을 input 또는 text 박스에 값 넘기기 \| 자바스크립트
179	폼에 있는 내용을 똑같이 복사해 주는 스크립트 1
178	폼에 있는 내용을 똑같이 복사해 주는 스크립트 2
177	FIELDSET 태그
176	셀렉트 박스 선택시 선택 옵션보여주기
175	div 줄바꿈과 줄바꿈 방지
174	HTML CSS 에서 ul li 블릿, 기호, 점 없애기
173	TABLE의 TD 고정/배경이미지 고정하는 법
172	Textarea 속성
171	css list-style 정리
170	border 가 incide가 안될경우
169	셀렉트 박스 선택시 선택 옵션보여주기