[해피CGI][cgimall][자바스크립트] 폼 자동으로 이동하기

폼을 작성하다 보면 자리수를 다 채우면 다음으로 이동하게 하면 클라이언트 입장에서는 조금이나마 불편한 점이 사라지겠죠..

그래서 이번에는 제목 그대로 자동으로 포커스를 이동하는 방법을 가르켜 주려고 합니다..
주민등록번호를 예로 들어보겠습니다.

[프로그램코드]

<form name=fo> 주민등록번호 : <input type="text" name="test1" size=6 maxlength=6 onKeyUp="KeyInput(0)"> - <input type="text" name="test2" size=7 mexlength=7 onKeyUp="KeyInput(1)"> 성명 : <input type="text" name="test3" size=6> </form>

이런식으로 form이 구성되어 있다면 여기에서 볼 것은 onKeyUp이벤트입니다. 이것은 키가 눌렀다 놓았을 때 발생하는 이벤트입니다. onKeyPress와 onKeyDown도 있습니다..
여기에서는 onKeyUp이벤트입니다. 키가 눌려지면 KeyInput함수를 호출합니다.

그러면 여기에서 KeyInput함수를 한번 보지요..

[프로그램코드]

function KeyInput(mode){ if(mode==0){ if(document.fo.test1.value.length ==6) document.fo.test2.focus(); }else if(mode==1){ if(document.fo.test2.value.length ==7) document.fo.test3.focus(); } }

이렇게 되어 있습니다.
보시면 알겠죠.. mode==0이면 test1의 길이를 구해서 6이면 test2로 포커스를 이동시킵니다. mode==1이면 test2의 길이를 구해서 7이면 test3으로 이동시킵니다.
간단하지요.. 많이들 활용해 보세요..