특히 서치 박스에 배경을 넣고 입력시 배경이 사라지는데 써 먹으면 좋습니다
<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>
'유용한정보' 카테고리의 다른 글
jquery ajax, $.get(), $.post() 사용방법 (0) | 2014.04.20 |
---|---|
grep perl 조합으로 파일내 문자열을 한꺼번에 변경하기 (0) | 2014.04.18 |
JQuery 기본 예제 모음 (0) | 2014.04.18 |
Input 박스에 포커스 되었을때 스타일 변경 (0) | 2014.04.18 |
대량 메일 발송 소스 (0) | 2014.04.16 |
모바일웹에서 자주 쓰는 속성들 (0) | 2014.04.15 |
<![CDATA[ ]]> 이 구문은 무엇을 뜻하는 것일까요? (0) | 2014.04.11 |
JW 플레이어 기본태그 (0) | 2014.03.30 |
댓글