[자바스크립트] 폼 자동으로 이동하기

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > 커뮤니티 > 골드팁 상세보기

클라우드태그

Javascript

PHP

ASP

CSS

html

mysql

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

316

4,714

2002-12-30 02:04:45

닉네임

rimi

제목

[자바스크립트] 폼 자동으로 이동하기

내용

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

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

[프로그램코드]

<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으로 이동시킵니다.
간단하지요.. 많이들 활용해 보세요..