Javascript & JQuery & CSS

1. Enter 키를 눌렀을때 다음 포커스 이동 예제

가끔 프로젝트를 진행하다 보면 엔터키를 제어해 달라는 경우가 종종 있습니다.

엔터를 입력했을때 다른 포커스로 자동으로 이동하게 해 달라고 합니다.

이런경우 Function 을 만들어 사용하면 간단하게 해결 됩니다.



키보드 키를 입력했을 경우 enter_chk Function을 실행합니다.

regist_person은 Form 이름이구요. ut_name 은 이동하고 싶은 Form Tag 이름입니다.
 

			function enter_chk(frm_name,nextcol)
			{
				var frm=eval("document.all."+frm_name);
				if(event.keyCode == 13)
				{
					next_c="frm."+nextcol+".focus();"
					eval(next_c);
				}
			}   
			

보시면 아시겠지만, 아주 간단한 소스입니다.

2. 자리수 체킹을 이용한 다음 포커스 이동 예제1

1번 예제에서는 엔터키를 입력했을 경우 다음 포커스로 이동 시켜달라는 요청이 많이 들어 옵니다.

그리고 자릿수를 이용한 포커스 이동도 가끔 요청 할때가 있습니다.

예를 들면 주민번호 앞자리 6자리를 입력했을 경우 자동으로 뒷자리로 포커스를 이동되게 만들어 달라고 하지요..

아래의 소스는 이런 경우에 사용될 수 있습니다.

TEXTBOX 에 6자리를 입력하면 자동으로 다음포커스로 이동하게 됩니다.

onKeyup 이벤트가 발생하면 nextCol function 을 호출합니다.

nextCol(6,this,'txt2');

nextCol 함수의 첫번째 인자값 6은 자릿수 입니다. 6자리가 입력될때까지 반복 수행합니다.

nextCol 함수의 둘번째 인자값 this 는 현재 TextBox 객체 입니다.

nextCol 함수의 세번째 인자값 'txt2' 는 다음포커스로 이동할 값을 넣어 줍니다.

nextcol 함수에서 next_c="frm."+nextcol+".focus();" 명령을 수행한 후 이동 시키지요.
 

       
6자리 입력시 : 
다음 포커스 
3. 자리수 체킹을 이용한 다음 포커스 이동 예제2
 

		//포커스 이동
		function fncNextFocus(obj, limitLength, nextObj) 
		{
			if(obj.value.length == limitLength) nextObj.focus();
		}

OnKeyUp="fncNextFocus(this,6,document.all.regist_person.p_jumin2);"

(2)의 예제와 비슷한 예제 입니다.

fncNextFocus 함수를 호출합니다.

document.all.regist_person.p_jumin2 객체를 직접 넘겨서 바로 처리합니다.