로그인 폼에서 많이 사용하는 스크립트다.
아이디와 패스워드를 구분하는데 input 박스 안에서 구분을 해주고 onfocus 이벤트가 일어 날때
구분을 없애주고 만약 아무 값도 들어가지 않은 상태에서 onfocusout이 된다면 다시 구분을 넣어주는 식이다.

<script type="text/javascript">
function inputBgImg(obj,con,over){
    if(over == 'over')
    {
        obj.style.backgroundImage = 'url()';
    }
    else
    {
        if(!obj.value)
        {
            obj.style.backgroundImage = 'url(/ex/inputImg/txt_'+ con +'.gif)';
        }
    }
}
</script>
<input type="text" style="background:url('/ex/inputImg/txt_id.gif') no-repeat;"
onfocus="inputBgImg(this,'id','over');" onfocusout="inputBgImg(this,'id','out');" />

<input type="password" style="background:url('/ex/inputImg/txt_pw.gif') no-repeat;"
onfocus="inputBgImg(this,'pw','over');" onfocusout="inputBgImg(this,'pw','out');" />

일단 input에 background로 이미지를 넣어 주고 onfocus, onfocusout 이벤트로 over 값만 달리해서 같은 함수 호출.
over 값이 들어 갈때는 backgroundImage 스타일에 Null 값을 넣어 주면 이미지가 사라지고
over 가 아닌 다른 값이 들어 갈때 obj의 value 값을 보고 아무 값이 없으면 다시 해당 이미지를 넣어 준다.

Posted by siche

회원 가입을 하실때 보면 주민번호를 입력할때 주민번호 앞자리를 다 채우면 자동으로 뒷번호 입력으로 넘어 가시는 걸 보신적이 있을 것입니다. 그것에 대해서 알아 보죠.^^

<script type="text/javascript">
function siche_next() {
if (document.number.number1.value.length==6) {
document.number.number2.focus();
return;
}
}
</script>

<form method=post name=number>
주민번호 <input maxLength=6 name=number1 onkeyup='siche_next()'>
- <input maxLength=7 name=number2>
</form>

우선 텍스트 상자의 이름은 각각 number1 과 number2 입니다. 이 텍스트 상자는 number라는 폼태그 안에 들어 있습니다. number1이라는 텍스트 상자는 주민등록 앞자리 번호가 들어갑니다. 전국민의 앞자리는 6자리로 정해져 있습니다. 여기서 maxLength=6은 텍스트 상자에 최대한 입력되는 수입니다. 여기 뒷부분을 보시면 onkeyup 이있고 siche_next()를 실행 합니다. 이제 script 부분을 보시죠.

function siche_next() {
if (document.number.number1.value.length==6) {
document.number.number2.focus();
return;
}
}
if(document.number.number1.value.length==6)

만약에 number1에 들어 가는 value의 길이 즉, 입력되는 값이 6개가 된다면 document.number.number2.focus(); number2라는 곳에 포커스를 맞춘다는 것입니다. 이런식의 입력칸이 많아 지고 6개가 되면 넘어가는것도 필요하고 8개가 되면 넘어가고.. 등등으로 여러가지로 필요 하다면

function siche_next(siche01,siche02,siche03) {
if (siche01.value.length==siche02) {
siche03 .focus();
return;
}
}

이렇게 만들어 놓고 onkeyup='siche_next(this,6,document.number.number2)' 이런식으로 그때 그때 상황에 맞추어서 사용하시면 되겠지요~? 그럼 유용하게 쓰세요~ ^______________^

Posted by siche

회원 가입을 하실때 보면 우편번호를 꼭 우편번호 찾기를 해야만 입력되는 것을 많이 보셨을 것입니다.
자기가 직접 넣으려고 하면 넣어 지질 않죠. 그것에 대해서 알아 보겠습니다.^^

<script type="text/javascript">
function input_zip(){
document.siche_form.zip1.value="123";
document.siche_form.zip2.value="456";
}
</script>

<form name="siche_form">
<input type="text" size=5 name="zip1" readonly> -
<input type="text" size=5 name="zip2" readonly>
<input type="button" value="우편번호 찾기" onclick="input_zip()">
</form>

위의 소스에서 포인트는 input 안에 들어 있는 readonly입니다. 구지 따로 설명할 것은 없는것 같네요..^^;;

Posted by siche