전화번호, 주민등록번호 다음 칸으로 focus 넘기기

<script>
function nextBlank(N, Obj, nextID) {
	if(document.getElementById(Obj).value.length == N) {
		document.getElementById(nextID).focus();
	}
}
</script>
<input type="text" name="test1" id="test1" onkeyup="nextBlank(3, this.id, 'test2')" />
<input type="text" name="test2" id="test2" onkeyup="nextBlank(4, this.id, 'test3')" />
<input type="text" name="test3" id="test3" />



주민등록번호는 앞자리가 6개(불변)고 전화번호의 경우는 요즘은 들쑥날쑥이라서.
그래도 별 이상한 클라이언트들이 많은 관계로...
위 스크립트만 갖다가 상단에 넣고 필요한 input에 이벤트를 걸어 주면 된다.

onkeyup="nextBlank( 1, 2, 3 )"

1
원하는 숫자를 적으면 된다.
3으로 적었다면 총 세 글자가 적히면 다음 칸으로 넘어가는 조건이 된다.

2
제일 편하게 그냥 this.id라고 적어 주는 게 좋다.
대신 input마다 id값을 다 넣어 줘야 한다는 거 잊지 말자.

3.
1번 조건을 만족할 경우 커서가 어디로 넘어갈지 정하는 부분이다.
실제로 넘길 input의 id값을 적어 주면 된다.


인자값은 두 개로 줄이려고 했는데 nextSibling(next시발룸) 얘가 엔터가 쳐져 있는 경우나 중간에 다른 문자나 이런 것들이 있을 경우엔 걔네를 지 형제로 인식해 버린다.
뭔 말인고 하니 보통 전화번호 넣는 부분이나 주민등록번호 넣는 부분에서



얘네 둘만 넣는 게 아니라는 것이다.
보통 저거 사이에 -(dash)를 넣거나 이미지를 사용해서 막 꾸미기 마련이다.
그럴 때 첫 번째 input에서 nextSibling으로 찍어 보면 다른 애들이 찍힌다는 것이다.
그러니 귀찮아도 인자값은 세 개로 해서 사용하자스라.

이 글을 공유하기

댓글(1)

Designed by JB FACTORY