태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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>

추천 목록

번호	제목
228	사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
227	border-radius 속성
226	jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
225	iframe 높이 jquery로 자동조절하기
224	jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
223	자바스크립트로 복사하기 기능 구현하기
222	DIV 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)
221	주소등 인코딩해서 보내기
220	jquery load() 메소드 (비동기 웹페이지 로드)
219	[Ajax] ajax 예제2
218	[Ajax] ajax 예제1
217	[Ajax] JSON (Javascript Object Notation) 사용하기
216	[jQuery] jQuery.ajax() HTTP 비동기 데이터 교환
215	레이어 상단 무조건고정
214	input, select 박스 disable 시키기
213	레이어팝업
212	display 속성, position 속성
211	HTML & CSS Tip
210	div display 속성
209	div 줄바꿈과 줄바꿈 방지
208	float:left를 대체할 수 있는 display:inline, inline-block
207	웹표준 TABLE (테이블)
206	dl dt dd 에 대해
205	div 세로정렬
204	다중카테고리
203	다중 셀렉트
202	텍스트 박스의 입력글자수 제한
201	팝업창으로 폼값 전송하기
200	오른쪽 마우스 클릭시 나타나는 메뉴
199	테이블 점선테두리 만들기