태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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>

추천 목록

번호	제목
2,255	마우스오버 롤링이미지를 jQuery로 변경하기
2,254	PHP 처리속도 올리기
2,253	input 박스에 안내문구 나타내기
2,252	input textarea 포커스시 효과주기
2,251	css background sprites
2,250	Jquery 모음
2,249	오른쪽 마우스 클릭시 나타나는 메뉴
2,248	테이블 점선테두리 만들기
2,247	배경이미지 제어하기(고정하기)
2,246	글자 줄바꿈과 줄바꿈 금지
	Input 박스에 사라지는 배경 넣기
2,244	텍스트 overflow
2,243	border-style속성의 값
2,242	Input 박스에 포커스 되었을때 스타일 변경
2,241	CSS Intro
2,240	CSS용어 정리
2,239	JavaScript Copy to Clipboard
2,238	부모dom 의 넓이에 따라 자동으로 넓이 조절하기
2,237	3D 입체 갤러리 (바람개비 느낌) 상,하,좌,우 드래그 가능
2,236	3D 입체 갤러리
2,235	아이폰, 안드로이드 바탕화면에 바로가기 만들기
2,234	웹호스팅 이용자가 업로드 용량 늘리기
2,233	이미지가 클 경우 테이블이 늘어났다가 줄어들때
2,232	cut - 문자열 자르기
2,231	PHP 코딩 스타일
2,230	국내IP 정보 조회하는 클래스(php)
2,229	php->xml 생성하는 class
2,228	socket이용한 타사이트 이미지 읽기
2,227	사이즈가 큰이미지 웹페이지 출력시 자동으로 사이즈 줄이기...
2,226	php로 작성한 간단 RSS2.0 리더