정보창고/블로그 정보

HTML-검색 폼 input box에 이미지 넣기

풍란의 향기 2012. 2. 9. 13:12


<script language="javascript">
        var c=false;
        // 포커스가 인풋 박스안에 있을때 배경이미지 지우기
        function ch (valueid) {
                if(valueid ==  'keyword')  document.search.keyword.style.backgroundImage="";
                c=true;
        }
        // 포커스가 인풋 박스를 벗어났을때 배경이미지 살리기 (입력값이 있으면 살리지 않기)
        function chout (valueid) {
                if(valueid ==  'keyword') {
                        // 검색폼에 쓰일 이미지경로
                        if(!document.search.keyword.value) document.search.keyword.style.backgroundImage="url(http://newenuri.com/newdata/images/search_bg1.gif)";
                }
                c=true;
        }
function check_keycode(e) {
                if (e.type == "keypress") var whichCode = e.keyCode;
                if (whichCode == 13)
                         chkinput();
        }
</script>

<form name = "search" method="post">
<!-- background-image:url(검색폼에 쓰일 이미지경로);" -->
<input type="text" name="keyword" size="20" maxlength="15" style="color:#CC0066;height:20; background-image:url(http://newenuri.com/newdata/images/search_bg1.gif);" class="EDITBX" onkeydown="return ch('keyword');" onmousedown="return ch('keyword');" onfocusout="return chout('keyword')" onkeypress="javascript:check_keycode(event);">
</form>