본문 바로가기
IT-개발,DB

[web/javascript] 입력양식에서 포커스 자동이동하기

by SB리치퍼슨 2014. 6. 20.





입력양식에서 포커스 자동이동하기



- onkeyup : 키를 눌렀다 떼면 이벤트를 호출합니다.
- onkeypress : 키를 누르면 이벤트를 호출합니다.
- returnValue : 이벤트 핸들러의 처리상태를 설정합니다.



* 이벤트 핸들러
onkeypress = "post_num()"
예를 들어 위와 같이 "키를 누르면(onkeypress)를 함수(post_num())를 호출한다"는 부분에서 "키를 누르면(onkeypress)"와 같은 조건부분.





----------------------------------------------------------------------------------------



<html>
<script language="JavaScript">
<!--



function post_num() {
/* ASCII code값  '0'=48, '1'=49, '2'=50, ... '9'=57 */
if ((event.keyCode<48) || (event.keyCode>57))
  event.returnValue=false;
}



function js_tab_order(arg, nextname, len) {
if (arg.value.length == len) {
  nextname.focus()
  return;
}
}



-->
</script>



<body onload="frm1.post1.focus()">
<form name="frm1">
<table border=1 cellpadding=1 cellspacing=2 bordercolor="#aaccdd">


<tr>
  <td width=70 bgcolor="#aaddff" align="center">우편번호</td>
  <td width=100 bgcolor="#ddeeff" align="center">
  <input type="text" name="post1" maxlength=3 size=3
   onkeyup="js_tab_order(this, frm1.post2, 3)"
   onkeypress="post_num()">
-
  <input type="text" name="post2" maxlength=3 size=3
   onkeyup="js_tab_order(this, frm1.post1, 3)"
   onkeypress="post_num()">
  </td>
  <td width=230 bgcolor="#ddeeff" align="center">세 글자를 치면 자동으로 이동합니다.</td>
</tr>
</table>
</form>
</body>



</html>

반응형

댓글