엔터키를 치면 다음칸으로 이동

  안녕하세요?
  오늘은 입력상자에서 마우스나 탭키로 이동하지 않고 엔터키를 치면 바로 다음칸으로 이동하는 스크립트입니다. 그렇게 어렵지 않습니다. 아래 소스코드를 보시죠.

<form name=login_form method=post action="http://www.jasko.co.kr/result.html">
아이디 : <input type="text" name="user_id" onkeydown="if (event.keyCode == 13) login_form.user_password.focus();"><br>
비밀번호 : <input type="text" name="user_password" onkeydown="if (event.keyCode == 13) login_form.submit();"><br>
<input type="button" value="로그인" onclick="document.login_form.submit()">
</form>

보시면 onkeydown이라는 이벤트가 있습니다. 이 말은 키가 눌러졌을때 발생하는 이벤트입니다. 즉 키가 눌러졌을때 다음을 실행하라는 내용입니다.

"if (event.keyCode == 13) login_form.user_password.focus();">

여기서보면 keyCode가 13이면 13은 엔터키의 키값입니다. 즉 엔터키가 눌러지면 login_form인 폼에 user_password라는 컨트롤로 즉 패스워드 입력칸의 이름을 보시면 user_password라고 되어있습니다. focus() 포커스를 줘라 하는 내용입니다. 즉 로그인칸에서 엔터키를 치면 패스워드 칸으로 이동해라 하는 내용입니다. 어렵지 않지요? 여기서 주의할것은 keyCode=-=13할때 반드시 c자를 대문자 C로 하셔야 한다는 것입니다. 소문자로 하면 안되더군요. ㅎㅎ 패스워드에서 엔터키를 치면 어떻게 되어 있습니까?

"if (event.keyCode == 13) login_form.submit();"

이렇게 되어있지요? 패스워드에서 엔터키를 치면 login.form의 폼에 submit을 하라는 것입니다. 즉 폼을 전송하라는 것이지요. 직접해보면 위에 폼의 action에 지정된 주소로 이동하게 됩니다.

<form name=login_form method=post action="http://www.jasko.co.kr/result.html">

http://www.jasko.co.kr/result.html 여기로 말이지요. 그럼 직접한번 실행해 보시기를 바라며 다음시간에 다시 만나요~