|
|
검색폼을 꾸며보자
<style type='text/css'> .search_form_on{ background:url('http://www.iezn.com/images/i.gif'); background-attachment: fixed; background-repeat: no-repeat; background-position: left center; padding-left:9px; color:#bbbbbb; font-size:9pt; } .search_form_off{ font-size:9pt; } </style> <form name='f' onSubmit='return search_submit()'> <input type='text' name='search_form' class='search_form_on' onFocus="search_form_focus()" onBlur="search_form_blur()"> <input type='submit' value='검색'> </form> <script type="text/javascript"> /** * author : iezn<iezn@iezn.com> * homapage : http://iezn.com */ var pre_text; //검색폼에 대한 초기화 function search_form_init(){ pre_text='검색어를 입력하세요';//초기 문자열 document.f.search_form.value = pre_text; } //폼 존재여부체크및 초기화 실행 try{ search_form_init(); }catch(e){ alert('검색폼이 존재하지 않습니다'); } /** * search_form_focus * 검색폼에 포커스시 적용함수 */ function search_form_focus(){ document.f.search_form.value='';//초기 문자열 null document.f.search_form.className='search_form_off';//스타일 off } /** * search_form_focus * 검색폼에 포커스해지시 적용함수 */ function search_form_blur(){ if(document.f.search_form.value==''){//사용자 키워드 입력이 없는경우 document.f.search_form.value = pre_text;//초기값으로 대체한다 document.f.search_form.className='search_form_on';//스타일 복구 } } /** * search_submit() * 검색폼 전송시 적용함수 */ function search_submit(){ if(document.f.search_form.value == pre_text || document.f.search_form.value == ""){ alert('검색어를 입력하세요'); document.f.search_form.focus(); return false; } } </script> |
| 
|
