|
[Javascript] 텍스트 박스에 자리수 차면 커서 이동시키기
텍스트 박스(Text Field)의 'size' 에 지정된 만큼 자리수가 차면 커서를 다음 텍스트 박스로 이동시키는 짧은 예제입니다.
흔히 주민등록번호나 사업자등록번호를 입력 받을때 첫 텍스트 박스에 6자리의 숫자가 채워지면 다음 텍스트 박스로 이동시키는 처리를 할때가 있습니다. 이럴 경우라면 텍스트 박스에는 오로지 숫자만 입력 되어져야 할 것입니다.
아래의 소스에서는 KeyUp 이벤트에서 포커스 이동을 담당하고, KeyPress 이벤트 발생시 event.keyCode 를 이용하여 숫자만 입력 받도록 처리하고 있습니다. ( event.keyCode 48 ~ 57 이 0 ~ 9 사이의 숫자입니다. )
그리고 한글을 입력받지 않기 위하여 style="ime-mode:disabled" 처리를 하고 있습니다.
<html>
<head>
<title>숫자만 입력받기</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="javascript">
<!--
function KeyCheck(objName,objSize,nextObjName)
{
if( objName.value.length == objSize ){
nextObjName.focus();
return;
}
}
//-->
</script>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<form name="myForm" method="post" action="">
입력 <input type="text" name="field1" size="6" OnKeyUp="KeyCheck(this,this.size,this.form.field2)"
onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false;"style="ime-mode:disabled">
-
<input type="text" name="field2" size="7" maxlength="7"
onKeyPress="if ((event.keyCode<48) || (event.keyCode>57)) event.returnValue=false;"style="ime-mode:disabled">
</form>
</td>
</tr>
</table>
</body>
</html> | |
조금의 도움이라도 되셨는지요? 위에 사용된 소스는 첨부화일에서 확인 하실 수 있습니다. | |
|
|
|
아침마당
